Color Picker & Converter — Free Online Tool

What is Color Converter (HEX, RGB, HSL, CMYK, Color Picker)?

Color converter transforms color values between formats: HEX (#FF5733), RGB (255, 87, 51), HSL (9°, 100%, 60%), HSV/HSB, CMYK (0%, 66%, 80%, 0%), color names (red, blue). Bidirectional conversion: HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK. Features: color picker (visual selection), palette generator (complementary, analogous, triadic colors), accessibility checker (WCAG AA/AAA contrast ratios for text/background), CSS output (color: #FF5733; background: rgb(255, 87, 51);), gradients (linear, radial), shade/tint generator (lighter/darker versions). Useful for: web design (CSS colors), graphic design (Photoshop, Illustrator: CMYK for print), accessibility (ensure readable text contrast), brand colors (convert logo color to all formats), color schemes (generate harmonious palettes).

• HEX (hexadecimal): #RRGGBB format (6 hex digits: 00-FF per channel). Example: #FF5733 = red: FF (255), green: 57 (87), blue: 33 (51). Short form: #RGB (#F00 = #FF0000). Used in CSS, HTML, design tools.
• RGB (red, green, blue): rgb(r, g, b) where r,g,b = 0-255. Example: rgb(255, 87, 51). Additive color (light-based: screens, monitors). CSS: rgb(255, 87, 51) or rgba(255, 87, 51, 0.8) with alpha (transparency).
• HSL (hue, saturation, lightness): hsl(h, s%, l%) where h = 0-360° (color wheel), s = 0-100% (saturation: gray to vibrant), l = 0-100% (lightness: black to white). Example: hsl(9, 100%, 60%). Intuitive adjustments (change hue, keep saturation/lightness).
• CMYK (cyan, magenta, yellow, black): cmyk(c%, m%, y%, k%) for printing. Subtractive color (ink-based). Example: cmyk(0%, 66%, 80%, 0%). Convert RGB → CMYK for print design (Photoshop, Illustrator).
• Color picker: Visual selection: click color in spectrum, adjust sliders (hue, saturation, lightness). Eyedropper: pick color from image, website. Shows all formats simultaneously (HEX, RGB, HSL, CMYK).

Why use color converter?

Different tools/platforms use different color formats. Converter ensures consistency across design, code, print.

• CSS colors (HEX vs RGB vs HSL): CSS supports: #FF5733, rgb(255, 87, 51), hsl(9, 100%, 60%). HEX = compact. RGB = intuitive (255, 0, 0 = red). HSL = easy adjustments (change hue without recalculating RGB). Convert based on preference.
• Print design (RGB to CMYK): Screens = RGB (additive). Printers = CMYK (subtractive). RGB colors on screen ≠ printed color (color shift). Convert RGB → CMYK before printing (Photoshop, Illustrator). Check CMYK values (avoid out-of-gamut colors).
• Accessibility (contrast ratios): WCAG 2.1: text/background contrast ≥ 4.5:1 (AA) or 7:1 (AAA). Tool calculates: white text (#FFF) on orange background (#FF5733) = 3.9:1 (fails AA). Adjust colors for accessibility.
• Brand consistency: Logo color in one format (HEX) → convert to all formats (RGB for web, CMYK for print, HSL for CSS). Ensure consistency across platforms (website, business cards, merchandise).
• Color palettes (harmonious schemes): Generate: complementary (opposite on color wheel), analogous (adjacent), triadic (120° apart). Base color #FF5733 → complementary #33FFEB. Use for UI design, branding.
• Shade/tint variations: Lighter/darker versions of base color. #FF5733 → tints (add white: #FF8866, #FFAA99) → shades (add black: #CC4429, #99331F). Use for hover states, backgrounds, borders.

When to use color converter

Use whenever working with colors in different formats or platforms.

• Web development (convert design colors to CSS: HEX, RGB, HSL).
• Graphic design (convert screen colors to print: RGB to CMYK).
• Accessibility audits (check text/background contrast ratios).
• Branding (convert logo color to all formats for consistency).
• UI/UX design (generate color palettes, harmonious schemes).
• Photo editing (adjust HSL for color grading, saturation, lightness).
• Color picking (extract color from image, website, PDF).
• CSS preprocessing (Sass/LESS: lighten(), darken(), adjust-hue()).

How to use color converter

Enter color in any format, see conversions to all formats.

1. Enter color: Type: HEX (#FF5733), RGB (255, 87, 51), HSL (9, 100%, 60%), color name (orange-red). Or use color picker (visual selection). Or eyedropper (pick from image/screen).
2. View conversions: All formats shown simultaneously: HEX: #FF5733, RGB: (255, 87, 51), HSL: (9°, 100%, 60%), HSV: (9°, 80%, 100%), CMYK: (0%, 66%, 80%, 0%). Copy any format (one-click).
3. Adjust color (optional): Sliders: hue (0-360°), saturation (0-100%), lightness (0-100%), alpha (transparency: 0-1). Real-time preview. Fine-tune color without manual calculation.
4. Check accessibility: Enter text color + background color. Tool shows contrast ratio: 4.2:1 (AA pass, AAA fail). Suggestions: lighten background or darken text for AAA compliance.
5. Generate palette: Select scheme: complementary, analogous, triadic, tetradic, monochromatic. Base color #FF5733 → generates 5-color palette. Export as CSS, Sass variables, JSON.
6. Create shades/tints: Generate 10 variations: tints (lighter: #FF8866, #FFAA99), base (#FF5733), shades (darker: #CC4429, #99331F). Use for design systems, UI kits.
7. Export/copy: Copy: CSS (color: #FF5733;), Sass ($color: #FF5733;), JSON ({"color": "#FF5733"}). Or download palette as .ase (Adobe Swatch Exchange), .png (color swatches).

Key features

• Multi-format conversion: HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK ↔ color names. Bidirectional: any format to any format. Real-time updates (change HEX → RGB updates, change RGB → HSL updates).
• Visual color picker: Click spectrum to select color. Sliders: hue (color wheel), saturation (gray to vibrant), lightness (black to white). Alpha slider (transparency: 0-1). Live preview.
• Eyedropper tool: Pick color from: uploaded image, website (screenshot), PDF. Click pixel → extract color (all formats). Useful for matching existing colors (logo, brand).
• Accessibility checker (WCAG): Contrast ratio calculator: text color vs background color. Shows: 4.5:1 (AA pass), 3:1 (AA fail). Levels: AA (normal), AAA (enhanced). Large text (≥18pt): 3:1 (AA), 4.5:1 (AAA).
• Palette generator: Color schemes: complementary (opposite), analogous (adjacent), triadic (120° apart), tetradic (square), monochromatic (shades of same hue). Export palette (CSS, Sass, JSON, .ase).
• Shade/tint generator: 10 variations: 5 tints (lighter: mix with white), base color, 4 shades (darker: mix with black). Material Design-style palettes (50, 100, 200, ..., 900). Use for design systems.
• CSS/Sass output: CSS: color: #FF5733; rgb(255, 87, 51); hsl(9, 100%, 60%); rgba(255, 87, 51, 0.8). Sass: $primary-color: #FF5733; lighten($primary-color, 10%); darken($primary-color, 20%).

Common use cases

• CSS color (HEX to RGB): Design in Figma (HEX: #FF5733) → convert to CSS rgb(255, 87, 51) or rgba(255, 87, 51, 0.9) with transparency. Use in stylesheets, styled-components.
• Print design (RGB to CMYK): Logo color on screen (RGB: 255, 87, 51) → convert to CMYK (0%, 66%, 80%, 0%) for printing. Check CMYK values in Photoshop/Illustrator before printing (avoid color shift).
• Accessibility audit: Button: white text (#FFF) on orange background (#FF5733). Contrast: 3.9:1 (fails AA: needs 4.5:1). Solution: darken background to #CC4429 (6.2:1, passes AA/AAA).
• Brand colors (all formats): Logo color #FF5733 → convert to: RGB (web), CMYK (print), HSL (CSS), Pantone (if needed). Ensure consistency across website, business cards, merchandise.
• Color palette (UI design): Primary color #FF5733 → generate triadic palette: #FF5733 (red-orange), #33FF57 (green), #5733FF (blue-violet). Use for: buttons, links, accents. Export as CSS variables.
• Hover states (shade/tint): Button background #FF5733 → hover state darker #CC4429 (shade). Or lighter #FF8866 (tint). Generate 5 shades for design system (default, hover, active, disabled, focus).

Examples

Color conversion examples.

#FF5733

RGB: rgb(255, 87, 51)
R: 255 (0xFF)
G: 87 (0x57)
B: 51 (0x33)

rgb(255, 87, 51)

HSL: hsl(9°, 100%, 60%)
Hue: 9° (red-orange)
Saturation: 100% (vibrant)
Lightness: 60% (medium)

#FF5733

CMYK: cmyk(0%, 66%, 80%, 0%)
Cyan: 0%
Magenta: 66%
Yellow: 80%
Black: 0%

Text: #FFFFFF (white)
Background: #FF5733 (orange)

Contrast ratio: 3.9:1
WCAG AA (≥4.5:1): ✗ Fail
WCAG AAA (≥7:1): ✗ Fail
Suggestion: Darken background

Base: #FF5733 (hue: 9°)

Complementary: #33FFEB (hue: 189°, opposite)
Analogous: #FF8F33 (hue: 39°), #FF1F33 (hue: -21°)
Triadic: #33FF57 (hue: 129°), #5733FF (hue: 249°)

Technical reference

Color format specifications and conversion formulas:

HEX format

#RRGGBB (6 hex digits: 00-FF per channel). Example: #FF5733 = R: FF (255), G: 57 (87), B: 33 (51). Short form: #RGB (#F00 = #FF0000). Case-insensitive (#ff5733 = #FF5733).

RGB format

rgb(r, g, b) where r,g,b = 0-255 (8-bit per channel). Example: rgb(255, 87, 51). With alpha: rgba(255, 87, 51, 0.8) where alpha = 0-1 (0 = transparent, 1 = opaque). Additive color model.

HSL format

hsl(h, s%, l%) where h = 0-360° (hue: color wheel), s = 0-100% (saturation: 0% = gray, 100% = vibrant), l = 0-100% (lightness: 0% = black, 50% = pure color, 100% = white). With alpha: hsla().

HSV/HSB format

hsv(h, s%, v%) where v = value/brightness (0-100%). Similar to HSL but different lightness calculation. HSV: 0% = black, 100% = pure color or white (depends on saturation). Used in Photoshop (HSB).

CMYK format

cmyk(c%, m%, y%, k%) for printing. C = cyan, M = magenta, Y = yellow, K = black (key). Subtractive model (ink absorbs light). Formula: RGB to CMYK (complex, depends on print profile).

Conversion: HEX to RGB

#FF5733 → R: 0xFF = 255, G: 0x57 = 87, B: 0x33 = 51. Reverse: rgb(255, 87, 51) → R: 255 = FF, G: 87 = 57, B: 51 = 33 → #FF5733.

Conversion: RGB to HSL

1. Normalize RGB to 0-1 (r/255, g/255, b/255). 2. Find max, min. 3. Lightness L = (max+min)/2. 4. Saturation S = (max-min)/(1-|2L-1|). 5. Hue H = angle based on max channel. Complex formula.

Conversion: RGB to CMYK

K = 1 - max(R, G, B). C = (1-R-K)/(1-K). M = (1-G-K)/(1-K). Y = (1-B-K)/(1-K). Simplified formula (assumes sRGB, no color profile). Professional printing uses ICC profiles.

Contrast ratio formula

(L1 + 0.05) / (L2 + 0.05) where L1 = lighter color luminance, L2 = darker. Luminance L = 0.2126R + 0.7152G + 0.0722B (sRGB). WCAG AA: ≥4.5:1 (normal text), ≥3:1 (large text ≥18pt).

Color schemes

Complementary: opposite on color wheel (hue + 180°). Analogous: adjacent (hue ± 30°). Triadic: 120° apart (hue, hue+120°, hue+240°). Tetradic: 90° apart (square). Monochromatic: same hue, different saturation/lightness.

Common mistakes to avoid

Using RGB colors for print (should use CMYK)

Why it happens: Screens = RGB (additive: red+green+blue light). Printers = CMYK (subtractive: cyan+magenta+yellow+black ink). RGB colors on screen ≠ printed color (color shift, out-of-gamut). Bright RGB colors (electric blue, neon green) can't be printed accurately.

How to avoid it: Convert RGB → CMYK before printing. Check CMYK values in design software (Photoshop: Image → Mode → CMYK). If color out of CMUT gamut, adjust. Use CMYK color picker for print design.

Not checking contrast ratios (accessibility fail)

Why it happens: Low contrast = hard to read (especially for visually impaired). White text on light gray background = WCAG fail. Inaccessible website = lawsuit risk (ADA compliance). Google may penalize for poor UX.

How to avoid it: Use contrast checker: text + background → contrast ratio. WCAG AA: ≥4.5:1 (normal text), ≥3:1 (large text ≥18pt). AAA: ≥7:1, ≥4.5:1. Adjust colors if fail. Test with tool before publishing.

Using HEX shorthand incorrectly (#FFF ≠ #FFFFFF always)

Why it happens: #FFF = #FFFFFF (white). #F00 = #FF0000 (red). But #123 = #112233 (not #123123). Shorthand doubles each digit: #RGB → #RRGGBB. Can't use shorthand for all colors (#FF5733 ≠ #F53, no shorthand).

How to avoid it: Shorthand only when each pair same: #FFFFFF → #FFF, #112233 → #123. Otherwise use full form: #FF5733 (can't shorten). Check if doubling produces correct color.

Assuming HSL = HSV (different lightness calculations)

Why it happens: HSL: lightness 50% = pure color, 100% = white. HSV: value 100% = pure color or white (depends on saturation). Same hue/saturation → different appearance. Photoshop uses HSB (HSV), CSS uses HSL. Can't directly swap values.

How to avoid it: Know which model tool uses: CSS = HSL, Photoshop = HSB (HSV). Convert HSL ↔ HSV using formulas (not 1:1). Or use converter tool (avoids manual calculation errors).

Forgetting alpha/transparency channel (rgba, hsla)

Why it happens: rgb(255, 87, 51) = opaque. rgba(255, 87, 51, 0.8) = 80% opaque (20% transparent). Forgetting alpha = no transparency. Or using opacity CSS property (affects entire element, not just background). rgba = better control.

How to avoid it: Use rgba() or hsla() for transparency: rgba(255, 87, 51, 0.5) (50% transparent). Alpha = 0-1 (0 = transparent, 1 = opaque). CSS: background: rgba(...); (not background: rgb(...); opacity: 0.5;).

Frequently asked questions

What is the difference between HEX and RGB?

Same color, different notation. HEX = hexadecimal (#FF5733: 6 hex digits). RGB = decimal (rgb(255, 87, 51): 0-255 per channel). HEX = compact (CSS standard). RGB = intuitive (255 = max red). Both work in CSS.

When should I use HSL instead of RGB?

HSL = easier adjustments. Change hue (color) without recalculating RGB. Lighten/darken (adjust L%). Desaturate (reduce S%). CSS: hsl(9, 100%, 60%); lighten: hsl(9, 100%, 70%); (increase L%). RGB = harder to adjust manually.

How do I convert RGB to CMYK for printing?

Use converter tool or design software (Photoshop: Image → Mode → CMYK). Formula: K = 1-max(R,G,B), C = (1-R-K)/(1-K), M = (1-G-K)/(1-K), Y = (1-B-K)/(1-K). Simplified; professional printing uses ICC color profiles.

What is a good contrast ratio for text?

WCAG AA: ≥4.5:1 (normal text), ≥3:1 (large text ≥18pt or 14pt bold). AAA: ≥7:1, ≥4.5:1. Higher = more accessible (easier to read). Use contrast checker to verify. Black on white = 21:1 (maximum).

Can I use color names (red, blue) in CSS?

Yes, 147 named colors (red, blue, coral, tomato, etc.). But: limited palette, inconsistent across browsers (older versions). HEX/RGB = precise control. Use named colors for quick prototyping, HEX/RGB for production.

What are complementary colors?

Opposite on color wheel (hue + 180°). Example: orange (#FF5733, hue: 9°) → complementary cyan (#33FFEB, hue: 189°). High contrast (eye-catching). Use for: call-to-action buttons, accents.

How do I create a color palette from one color?

Use color schemes: complementary (opposite), analogous (adjacent ±30°), triadic (120° apart), monochromatic (shades/tints of same hue). Tools generate automatically. Export as CSS variables, Sass, JSON.

References

• MDN CSS Colors
• WCAG Contrast Guidelines
• Color Theory (Adobe)
• HSL vs HSV