Color Picker
Check color codes and convert between various formats.
Input Information
Result
#3B82F6rgb(59, 130, 246)hsl(217, 91%, 60%)Freely convert and preview HEX, RGB, HSL color codes!
A color picker is an essential tool for web development, graphic design, UI/UX design, and more, allowing accurate color selection and conversion to various formats.
Converts between three major color formats - HEX(#RRGGBB), RGB(Red, Green, Blue), HSL(Hue, Saturation, Lightness) - in real-time with instant preview.
Useful when setting brand colors in website design, managing consistent color palettes during design work, or exploring colors when you don't know the color code.
- 1
Pick a color
Click the color picker or enter HEX/RGB values directly.
- 2
Check converted formats
HEX, RGB, and HSL formats are shown simultaneously.
- 3
Check contrast ratio
Specify foreground and background colors for auto-computed WCAG contrast ratio and grade.
- 4
Copy and use
Click the copy button for your preferred format to use in CSS or design files.
Example 1 — Brand primary color
HEX #3b82f6 → RGB(59,130,246) → HSL(217,91%,60%). Against white (#ffffff): contrast 4.63:1 → AA grade. Suitable as button/link primary color.
Example 2 — Dark theme background
HEX #1e293b → RGB(30,41,59) → HSL(215,32%,17%). Against white: 12.7:1 → AAA. Secure this contrast for dark-theme readability.
Converts 2-digit hexadecimal to decimal.
Color Code Tips
QWhich format should I use — HEX, RGB, or HSL?
HEX is most common for CSS/web design. HSL is easier for adjusting hue/saturation/lightness intuitively. RGB is common in image editors. This tool converts between all three.
QHow do I check accessibility contrast ratio?
WCAG 2.1 requires ≥4.5:1 for normal text, ≥3:1 for large text (18pt+). Enter two colors here to auto-compute the ratio and grade (AAA/AA/Fail). Always verify for web/app design.
QHow do I check color-blind accessibility?
This tool only checks contrast ratio. For color-blind simulation, use dedicated tools (Coblis, Color Oracle). High contrast ratios improve distinguishability for color-vision deficiencies — securing contrast here is a good first step.
QHow do I adjust color temperature (warm/cool)?
Adjust the Hue (H) value in HSL mode. H 0–60 (red–yellow) is warm; H 180–270 (cyan–purple) is cool. Understanding this axis helps match site tone or brand identity.
QCan I use the generated color values directly in CSS?
Yes. HEX, RGB, and HSL values copy directly into CSS properties. Use the copy button for clipboard convenience.