Developer Tool
Color Picker & Converter
Pick any color and instantly convert between HEX, RGB, HSL, and HSB. Generate shades & tints, check WCAG contrast ratios. Everything runs in your browser — nothing is transmitted.
Color Values
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
HSB
hsb(217, 76%, 96%)
CSS Variable
--color-primary: #3b82f6;
Tailwind-style
'[#3b82f6]'
Contrast Ratio (WCAG)
The quick brown fox
Sample text preview
On White Background
The quick brown fox
Sample text preview
On Black Background
Shades (darker)
Tints (lighter)
How to use this tool
- 1
Pick or enter a color
Type a HEX code directly, use the color picker eyedropper, choose a preset, or click the shuffle icon for a random color. The tool updates all values instantly.
- 2
Copy the format you need
Click the copy icon next to HEX, RGB, HSL, HSB, CSS variable, or Tailwind-style value. Use the format that your project requires.
- 3
Check contrast and build a palette
Review the WCAG contrast ratios to ensure accessibility. Browse the 8 generated shades and tints — click any swatch to copy its HEX value.