Use the colour picker or type a hex code above. Drag the sliders below to adjust RGB values.
Colour formats — tap any to copy
HEX
#378ADD
tap to copy
RGB
rgb(55, 138, 221)
tap to copy
HSL
hsl(210, 68%, 54%)
tap to copy
HSB / HSV
hsb(210, 75%, 87%)
tap to copy
CSS variable
--color: #378ADD;
tap to copy
RGBA
rgba(55, 138, 221, 1)
tap to copy
RGB sliders
R
G
B
Contrast checker
Check if your colour meets WCAG accessibility standards against white and black backgrounds.
Sample text on white
On white background
—
Sample text on black
On black background
—
Recent colours — tap to restore
Frequently asked questions
How do I convert hex to RGB?
Enter your hex colour code (e.g. #378ADD) into the input field and the RGB, HSL, HSB and CSS values are calculated instantly. You can also use the colour picker.
What is the difference between HSL and HSB?
HSL (Hue, Saturation, Lightness) and HSB (Hue, Saturation, Brightness) are both cylindrical colour models. HSL is more common in CSS while HSB (also called HSV) is used in design tools like Photoshop.
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines contrast ratios for readable text. AA standard requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text.
How do I copy a colour value?
Tap any of the format cards (HEX, RGB, HSL, HSB, CSS, RGBA) to copy that value to your clipboard instantly.