One color, three syntaxes
Design tools export hex. CSS variables may use hsl. Canvas APIs want rgb. Editing all three by hand invites typos. Change any input or the picker; the swatch and sibling fields follow.
Default swatch: #6366f1 (indigo). Parse errors get an assertive alert for bad hex, rgb, or hsl strings.
Runs client-side only. No palette upload.
Use with CSS generators
Gradients from the CSS Gradient Generator start from picker colors; paste exact brand hex here first.
Box-shadow rgba comes from the CSS Box-Shadow Generator opacity slider. Match card border hex on this page before you ship.
Minify the stylesheet that references these values with the CSS Minifier.
Handoff to meta and markup
OG image URLs do not need color math, but theme-color meta sometimes does. Pair with the Meta Tags Generator for social tags on the same landing page.
3-digit hex expands to 6-digit on sync. Mixed case hex is normalized to lowercase in the field.
Out-of-gamut display depends on the monitor, not this page. Values are math-only sRGB.
Frequently Asked Questions (FAQ)
Which formats sync?
HEX (#RRGGBB), rgb(r, g, b), and hsl(h, s%, l%). Edit any field or the native color picker; others update if the value parses. Invalid input shows an alert and leaves prior sync.
Does the swatch preview alpha?
Preview uses opaque rgb from the current sync. This page does not model alpha in hex8 or rgba yet.
How are HSL values rounded?
Hue 0-360, saturation and lightness 0-100 percent, rounded to integers for display. RGB channels are 0-255 integers.
Copy buttons?
Copy HEX, Copy RGB, and Copy HSL each write the current field to the clipboard with status feedback.