Design Tool · Client-Side · Instant
Convert
Color
Picker
Pick any color and instantly convert between HEX, RGB, HSL, and CMYK. Generate tints, shades, and complementary palettes.
// formats
4
HEX, RGB, HSL, CMYK
// palette types
5
Shades, tints, comp…
// Total Uses
8
and counting
color_picker.js
LIVE
#D4FF00
Click to open
Color Picker
// HEX
#
// RGB red · green · blue
R
G
B
// HSL hue · saturation · lightness
H°
S%
L%
// CMYK cyan · magenta · yellow · key
C%
M%
Y%
K%
HEX
#D4FF00
RGB
rgb(212, 255, 0)
RGBA
rgba(212, 255, 0, 1)
HSL
hsl(74, 100%, 50%)
HSLA
hsla(74, 100%, 50%, 1)
CMYK
cmyk(17%, 0%, 100%, 0%)
CSS VAR
--color-primary: #D4FF00;
TAILWIND
'[#D4FF00]' → bg-[#D4FF00]
text-[#D4FF00]
10 shades — darker versions
§ Docs
How to Use
Pick a color
Click the color swatch to open your browser's native color picker, or
type directly into any input field — HEX, R/G/B, H/S/L, or C/M/Y/K.
Adjust with sliders
Use the H, S, L sliders for fine-grained control over hue, saturation
and lightness. R, G, B sliders let you tweak individual channels. All inputs sync in real
time.
Copy any format
Hit copy next to any format —
HEX, rgb(), hsl(), cmyk(), CSS variable, or Tailwind class. Paste
directly into your code.
Explore palettes
Switch between Shades, Tints, Analogous, Complementary, and Triadic
tabs to generate harmonious palettes. Click any swatch to pick that color.
? FAQ
Frequently Asked Questions
A HEX color code is a 6-digit hexadecimal string representing red,
green, and blue channels. Each pair of digits (00–FF) maps to a value from 0–255. For example,
#D4FF00 means Red=212,
Green=255, Blue=0.RGB (Red, Green, Blue) defines colors by mixing light channels —
great for screens. HSL (Hue, Saturation, Lightness) is more intuitive — you pick a base color
(hue), how vivid it is (saturation), and how dark or light (lightness). HSL is easier for making
slight adjustments to a color.
Use CMYK (Cyan, Magenta, Yellow, Key/Black) for print design.
Printers mix physical inks, not light, so they use the CMYK model. Digital screens use RGB. When
designing for print, always work in CMYK to avoid color surprises when the document is printed.
Complementary colors sit opposite each other on the color wheel (180°
apart in hue). They create high contrast and visual tension — useful for call-to-action buttons,
highlights, or any design element you want to pop against a background.
Copy the Tailwind arbitrary value from the output (e.g.
bg-[#D4FF00]) and paste it into
your HTML. This works in Tailwind v3+ with JIT mode enabled. Alternatively, add the color to
your tailwind.config.js under
the theme.colors section for a
named utility class.