Translating Design Tokens Between HEX, RGB & HSL
Convert hex codes into `rgb()` or `hsl()` syntax when configuring CSS custom properties, Tailwind themes, and semi-transparent UI overlays.
Color Picker
Explore, fine-tune, and convert colors across every design and development format in one place. Select a base hue from the interactive color picker or starter swatches, adjust individual Red, Green, and Blue channel sliders (0–255), and copy synchronized HEX, RGB, HSL, and CMYK codes in one click.
#0F766E
Colour values
HEX
#0F766E
RGB
rgb(15, 118, 110)
HSL
hsl(175, 77%, 26%)
CMYK
cmyk(87%, 0%, 7%, 54%)
How to Use the Color Picker
- 1
Click the visual color well or select one of the curated starter swatches to choose a base color.
- 2
Fine-tune the Red, Green, and Blue channel sliders (0 to 255) to dial in the exact shade.
- 3
Inspect the synchronized HEX, RGB, HSL, and CMYK readouts updated in real time.
- 4
Click any format's Copy button to paste the color code directly into your CSS, Tailwind config, or design tool.
Practical Use Cases
Checking Approximate CMYK Process Values
Preview Cyan, Magenta, Yellow, and Key (Black) ink percentages alongside screen RGB values before preparing print collateral.
Fine-Tuning Accessible Button & Badge Shades
Nudge individual RGB channels to darken or lighten brand colors for hover states, borders, and accessible text contrast.
Color Picker Features
Four Synchronized Color Spaces
View HEX, RGB, HSL, and CMYK values simultaneously as you adjust any control.
Precision 0–255 Channel Sliders
Adjust Red, Green, and Blue light intensities in single-unit steps.
Curated Starter Swatches
Jump quickly to balanced teal, indigo, emerald, amber, rose, and slate UI tones.
Runs 100% in your browser
Nothing is uploaded to a remote server, so your data and files stay strictly on your device.
Free and unlimited
No account registration, no watermarks, and no daily usage caps.
Mobile and desktop ready
Responsive layouts and comfortable touch controls that fit phones, tablets, and desktops.
Technical Specifications & Best Practices
- ✓HEX (`#0F766E`), RGB (`rgb(15, 118, 110)`), and HSL (`hsl(175, 77%, 26%)`) are all natively supported in modern CSS3.
- ✓CMYK values are calculated mathematically from sRGB; for offset commercial printing, always verify critical brand colors against a physical Pantone or ICC press profile.
- ✓If you want to sample a color from an existing photo or logo file, use our Image Color Picker or Image Palette Extractor.
- ✓Runs 100% locally in your browser with instant one-click copy buttons.