Color picker & converter
Pick, convert, and compare colors
Set Color A and Color B using the swatch, or by typing hex, RGB, or HSL values directly.
About this tool
Colors in digital design are specified in multiple formats — CSS names, hex codes, RGB/RGBA, HSL, and HSV — each suited to different contexts. This tool lets you pick a color visually and view it in every standard format, convert between formats for use in stylesheets or design systems, and compare colors side-by-side to ensure consistent branding. It's useful whether you're designing, developing, or reviewing color specifications.
Common uses
- › Converting between color formats (hex, RGB, HSL) for stylesheets
- › Comparing brand colors and generating color palettes
- › Accessing the color picker for precise color selection
- › Converting design software color values for use in CSS
- › Ensuring consistent color values across teams and tools
Example
Color A: #3B82F6 (blue)HEX: #3B82F6
RGB: rgb(59, 130, 246)
HSL: hsl(217, 91%, 60%)Technical notes
- › WCAG contrast ratios range from 1:1 (no contrast) to 21:1 (black on white); a ratio of at least 4.5:1 is required for normal text to meet WCAG AA accessibility standards.
- › Complementary, triadic, and analogous harmonics are calculated from the hue angle on the color wheel, not from perceptual color models, so results may differ slightly from tools that account for human color perception.
- › HSL and RGB describe the same color, but HSL's lightness/saturation values are often more intuitive to adjust by hand than raw RGB channel values.
FAQ
What contrast ratio do I need for accessible text?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). WCAG AAA, a stricter standard, requires 7:1 and 4.5:1 respectively.
What's the difference between HSL and RGB?
RGB specifies a color by the intensity of red, green, and blue channels (0-255 each). HSL describes the same color using hue (position on the color wheel), saturation, and lightness, which many designers find more intuitive to adjust.
What are color harmonics used for?
Harmonics like complementary, triadic, and analogous schemes are traditional color theory relationships that tend to look visually balanced together, useful as a starting point for choosing palettes.