Color Picker & Converter

Pick any color and instantly convert between HEX, RGB, HSL, HSB and CMYK formats. Get color shades, check contrast ratios for accessibility, and copy any value with one click.

HEX
RGB
HSL
HSB
CMYK
CSS
Color Shades — click to apply
Contrast Checker (WCAG)
0:1
Contrast Ratio
Large Text
Normal text sample
UI component text

Color Formats Explained

Different industries and tools use different color formats. Knowing when to use which format saves time and prevents color mismatches between design and code.

HEX

Hexadecimal color codes are the most common format in web development. A hex code like #f43f5e represents red, green, and blue values in base-16. Used in HTML, CSS, and most design tools.

RGB

RGB (Red, Green, Blue) describes colours as three values from 0–255. rgb(225, 29, 72) is the same as #e11d48. Used in web design and on screens.

HSL

HSL (Hue, Saturation, Lightness) is the most human-readable format. Hue is the color angle (0–360°), saturation is intensity (0–100%), lightness is brightness (0–100%). Great for creating color variations programmatically.

CMYK

CMYK (Cyan, Magenta, Yellow, Key/Black) is used in print design. Screens use RGB light mixing while printers use CMYK ink mixing. Always convert to CMYK before sending designs to print.

WCAG Contrast Guidelines

Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable for people with visual impairments.

Level Normal Text Large Text
WCAG AA 4.5:1 3:1
WCAG AAA 7:1 4.5:1
Fail Below 4.5:1 Below 3:1

Large text is defined as 18pt (24px) or 14pt (18.67px) bold. UI components and decorative elements are exempt from contrast requirements.

When to Use Each Format

Format Best For
HEX Web CSS, HTML, Figma, Sketch
RGB Web design, screens
HSL CSS variables, dynamic theming
HSB Photoshop, Illustrator color picker
CMYK Print, InDesign, Corel Draw

Converting and Using Colors in Web Design

Colors on the web are commonly represented in three interchangeable formats: HEX (like #3b82f6), RGB (red, green, blue values from 0–255), and HSL (hue, saturation, lightness) — each useful in different situations. HEX is compact and common in CSS, RGB maps directly to how screens render color, and HSL is often the most intuitive for adjusting a color's shade or brightness manually.

When choosing colors for text and backgrounds, contrast matters for accessibility — the WCAG guidelines recommend a contrast ratio of at least 4.5:1 for normal body text against its background to remain readable for users with low vision. Use the picked color values directly in your CSS with the copy buttons provided.

  • HEX: Compact 6-digit format, most common in CSS stylesheets.
  • RGB: Maps directly to red/green/blue light values used by screens.
  • HSL: Often the easiest format for manually tweaking a color's lightness or saturation.
  • Contrast Matters: Aim for at least a 4.5:1 contrast ratio between text and background for accessibility.

Frequently Asked Questions

Everything about color formats and conversion

Split the hex code into three pairs and convert each from base-16 to decimal. For #f43f5e: E1 = 225, 1D = 29, 48 = 72. So the RGB value is rgb(225, 29, 72). Use the converter above to do this instantly for any color.
HSL (Hue, Saturation, Lightness) and HSB (Hue, Saturation, Brightness) are similar but different. In HSL, a lightness of 100% always gives white. In HSB, a brightness of 100% gives a fully saturated color (not necessarily white). HSB is used in Photoshop and Illustrator. HSL is used in CSS.
Screens use RGB (additive color — mixing light) while printers use CMYK (subtractive color — mixing ink). Some RGB colors, especially very bright or vivid ones, cannot be reproduced in CMYK. This is called being "out of gamut." Always design print materials in CMYK mode from the start.
For WCAG AA compliance (the legal standard in many countries), normal text needs a contrast ratio of at least 4.5:1 and large text needs 3:1. For the stricter WCAG AAA standard, normal text needs 7:1. Black text on white has a contrast ratio of 21:1 — the maximum possible.
Shades are created by adjusting the lightness in HSL. Keep the hue and saturation the same and vary the lightness from very light (90%+) to very dark (10%–). This calculator shows 7 shades of your selected color automatically. Click any shade to apply it as your active color.
Aspect Ratio CalculatorCalculate and convert aspect ratios for video, images and screens. JSON Formatter & ValidatorFormat, validate and minify JSON with syntax highlighting. Image CropperCrop images to any size or aspect ratio.