Color Converter + Palette

Convert colors between HEX, RGB, HSL, HSB, and CMYK. Generate complementary, analogous, triadic, and other palettes. Check WCAG contrast ratios. All processing happens in your browser.

100% client-side. Your data never leaves your browser.

#3b82f6
R
G
B
Formats
HEX#3b82f6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
HSBhsb(217, 76%, 96%)
CMYKcmyk(76%, 47%, 0%, 4%)
WCAG Contrast
3.68:1AA Large
5.71:1AA
Palette
Send to:

Converters & Examples

HEX to RGB Converter: Color Code Translator

Convert HEX color codes like #3b82f6 to RGB values (59, 130, 246). Covers hex shorthand, alpha channels, CSS usage.

 RGB to HSL Converter: Color Model Translator

Convert RGB color values to HSL (Hue, Saturation, Lightness). Understand color models for CSS, design systems, and programmatic color manipulation.

 Tailwind CSS Color to HEX: Color Lookup

Look up Tailwind CSS color names and get their HEX values. blue-500 is #3b82f6, gray-900 is #111827. Quick reference for Tailwind color palette.

Related Tools

sha
Hash Generator

Generate MD5, SHA-1, SHA-256, and SHA-512 hashes from text or files. Uses the browser's Web Crypto API for SHA hashes with a pure JS fallback for MD5.

 %20
URL Encoder & HTML Entity Encoder

Encode text for URLs with encodeURIComponent or encodeURI, and escape HTML special characters to named or numeric entities. All processing happens in your browser.

Color Converter + Palette Generator

Convert colors between HEX, RGB, HSL, HSB/HSV, and CMYK formats instantly. Pick a color visually or type any CSS color value, named color, or raw format string. The tool generates all format representations simultaneously and produces color palettes based on color theory.

How to Use

  1. Pick a color. Click the color preview to open the system color picker, type a value in the input field, or drag the RGB sliders
  2. Read the conversions. All five formats (HEX, RGB, HSL, HSB, CMYK) update in real time
  3. Copy any format. Click Copy next to the format you need, or Copy All for every format at once
  4. Generate palettes. Select a harmony type (complementary, analogous, triadic, etc.) to see related colors
  5. Check contrast. The WCAG contrast ratio against white and black is shown automatically

How Color Models Work

Every color on your screen is produced by mixing red, green, and blue light at different intensities. RGB expresses this directly: three channels, each ranging from 0 to 255, giving 16.7 million possible colors. HEX is the same model written in base-16, which is why CSS adopted it. #FF0000 is rgb(255, 0, 0).

HSL and HSB rearrange the same information into a form that maps more closely to how humans think about color. Hue is the position on the color wheel in degrees (0 = red, 120 = green, 240 = blue). Saturation measures how vivid the color is versus gray. The third axis differs: HSL uses lightness (0% = black, 100% = white, 50% = pure hue), while HSB uses brightness (0% = black, 100% = full intensity). CSS uses HSL. Design tools like Figma, Sketch, and Photoshop use HSB.

CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive model for print. Inks absorb light instead of emitting it. The conversion from RGB to CMYK is a mathematical approximation because the two color spaces do not cover the same gamut. Saturated blues that look vivid on screen often appear muted in print. For production print work, you need ICC profiles.

The palette generator uses the HSL color wheel to compute color harmonies. Complementary colors are 180 degrees apart. Analogous colors are 30 degrees apart. Triadic colors form an equilateral triangle on the wheel. These relationships are the foundation of color theory in design.

Need to encode color data for transport? Base64 Encode/Decode handles binary to text encoding. Working with URL query parameters that contain color values? The URL Encoder ensures # and % characters are escaped correctly.