Birdor

Tools · Color

Color Palette Generator

Paste a HEX color, and Birdor will show you its RGB/HSL values, a light/dark ramp, WCAG contrast results, and a Tailwind-style color scale you can plug into your design system.

Input color

HEX only · #RRGGBB / #RGB
HEX#5EA3FF
RGB94, 163, 255
HSL214°, 100.0%, 68.4%

Light / Dark ramp

Base ±10% lightness
Lighter+10% L
#91C0FF
BaseOriginal
#5EA3FF
Darker-10% L
#2B86FF

Quick usage

Tailwind (hex)#5EA3FF
CSS variable--birdor-accent: #5EA3FF;
HSL token--birdor-accent-hsl: 214 100.0% 68.4%;

Contrast checker

WCAG 2.1 · AA / AAA
On Birdor darkBackground #0F172A
6.94 : 1
AaBirdor sample
#5EA3FF
✓AA normal
·AAA normal
✓AA large
✓AAA large
On whiteBackground #FFFFFF
2.57 : 1
AaBirdor sample
#5EA3FF
·AA normal
·AAA normal
·AA large
·AAA large

Scale generator

Tailwind-style 50–900 ramp
Accent 50#E5F0FF
--birdor-accent-50
Accent 100#D8E9FF
--birdor-accent-100
Accent 200#AFD2FF
--birdor-accent-200
Accent 300#91C0FF
--birdor-accent-300
Accent 400#72AFFF
--birdor-accent-400
Accent 500#5EA3FF
--birdor-accent-500
Accent 600#3F91FF
--birdor-accent-600
Accent 700#2180FF
--birdor-accent-700
Accent 800#026EFF
--birdor-accent-800
Accent 900#0061E2
--birdor-accent-900

Birdor palette

Inspired by Slate + Birdor blue
primary#5EA3FF
--birdor-primary
primaryDark#2C6CD6
--birdor-primaryDark
primaryLight#A9CBFF
--birdor-primaryLight
neutral 900#0F172A
--birdor-neutral900
neutral 800#1E293B
--birdor-neutral800
neutral 700#334155
--birdor-neutral700
neutral 600#475569
--birdor-neutral600
neutral 500#64748B
--birdor-neutral500
neutral 400#94A3B8
--birdor-neutral400
neutral 300#CBD5E1
--birdor-neutral300
neutral 200#E2E8F0
--birdor-neutral200
neutral 100#F1F5F9
--birdor-neutral100