Loading…
Loading…
Pick colors & convert between HEX, RGB, HSL, CMYK
Complementary
Analogous
Triadic
Split Complementary
Run your projects on Claude Code?
We packaged the .claude config that runs this site — 26 specialist agents, 14 workflow skills, and 6 rule files from 31 real production incidents. From $9.
Get the Claude Code Production Pack — $29Every designer and developer needs a reliable color picker that converts between formats instantly. This tool combines a visual HSL color canvas with real-time conversion to HEX, RGB, HSL, and CMYK — plus automatic palette generation for design inspiration.
The picker uses the HSL color model internally (Hue 0-360°, Saturation 0-100%, Lightness 0-100%) for intuitive color selection, then converts mathematically to all other formats in real time. Palettes are generated using color theory relationships on the hue wheel.
A frontend developer needs to convert a designer's HEX color to RGB for a canvas drawing context — types #3b82f6 and gets rgb(59, 130, 246) instantly.
A designer exploring color schemes picks a brand blue, then uses the generated triadic palette to find complementary accent colors.
A developer debugging CSS sees rgb(34, 197, 94) in DevTools and needs the HEX equivalent — the tool converts it instantly.
A print designer converting screen colors to CMYK for a brochure — picks the color and reads the CMYK values directly.
Scope note: CMYK conversion is approximate (uses a standard formula without ICC color profiles). For print-accurate CMYK, verify with professional color management software.
Use the color canvas or sliders to pick your desired color visually
Or type a HEX, RGB, or HSL value directly — all other formats update instantly
Click Copy next to any format to copy it to your clipboard
View generated color palettes (complementary, analogous, triadic) below the picker
Click Save Color to store it in your browser history for quick access
About the Color Picker
Type or paste your HEX code (e.g., #3b82f6) in the HEX input field. The RGB values update instantly below it.
The current version works with solid colors. For transparency, add the alpha value manually (e.g., rgba(59, 130, 246, 0.5)).
The tool generates complementary (opposite), analogous (adjacent), triadic (120° apart), and split-complementary palettes from your picked color.
The tool provides a visual canvas and HSL sliders for color selection. In Chrome/Edge, you can use the native color input element for eyedropper functionality.
Builder/critic agent prompts with brakes built in
Open →DeveloperFormat, validate & diff JSON — runs entirely in browser
Open →DeveloperTest regex live — railroad diagrams + plain English explained
Open →DeveloperOne color in, full design system out
Open →