🧰 ToolPicoAll Tools →
🎨 Visual & Dev

Color Converter

Instantly convert between HEX, RGB, HSL, HSV/HSB, and CMYK. Pick a color or type a code — every format stays in sync. Plus a WCAG 2.1 contrast checker and a complementary/analog/triadic palette generator — all in your browser, for free.

HEX · RGB · HSL · HSV · CMYK Alpha supported WCAG 2.1 AA / AAA Updated: Jul 19, 2026
Selected color
#7C3AED
—
HEX
You can type #RRGGBB, the short #RGB form, or add alpha with #RRGGBBAA.
RGB
HSL
HSV / HSB
Alpha (opacity)
100%
All formats — click to copy
Modern color spaces — OKLCH · LAB · LCH
Developer code output — click to copy
Quick colors
Quick answer To convert a HEX code (e.g. #7C3AED) to RGB, convert each two-character block from base 16 to base 10: 7C=124, 3A=58, ED=237, giving rgb(124, 58, 237). The same color in HSL is hsl(262, 83%, 58%). Pick a color above and every format, the contrast ratio, and a palette generate automatically.
HEX
RGB
HSL
Relative luminance (L)
🎨 Note: All conversions use standard sRGB color space math and run entirely in your browser — no data is ever sent to a server. The color you see on screen can vary with monitor calibration, panel type, and lighting conditions. The CMYK output is a simple mathematical approximation. Results are for informational purposes only; for exact print or brand colors, use the relevant ICC color profile, a Pantone reference, or your brand guidelines.
🎨 Color Converter — ToolPico ↗

WCAG contrast ratio checker

Enter a text (foreground) color and a background color to see the WCAG 2.1 contrast ratio and AA/AAA results with a live preview. Aim for at least 4.5:1 for normal-size text to keep it accessible.

—
contrast ratio
Large heading example (24px)
Normal body text looks like this. For accessibility this line needs to be comfortably readable — WCAG AA requires at least 4.5:1 contrast.

Color blindness simulation

How is the color you picked above perceived under different types of color blindness? See protanopia, deuteranopia, tritanopia, and achromatopsia (total color blindness) simulations to quickly check whether your design stays distinguishable for color-blind users. A natural companion to the contrast checker.

Compare "Normal" on the left with the others. Tapping a color copies its HEX code. This simulation is an approximate client-side matrix transform; a precise clinical assessment requires a medical test.

Color palette generator

Harmonious palettes derived from the color you picked above. Each one is generated automatically from a color-wheel relationship (complementary, analog, triadic, split-complementary, tetradic/square) or a lightness ramp (monochromatic). Tap a color to copy its HEX code to your clipboard.

Shade & tint scale generator (50–950)

A Tailwind-style numbered scale generated from the color you picked above — 50 (lightest) through 950 (darkest), with your base color mapped to the closest step. Tap any step to copy its HEX code, or copy the whole scale as CSS variables or a Tailwind config block below.

🪜 50–950 scale
Same hue and saturation as your base color; only lightness changes at each step. The step closest to your base color is outlined.
Export — click to copy

CSS gradient generator

Build a two- or multi-stop linear-gradient() from the color you picked above plus extra stops of your choice. Adjust the angle, tap a preset, then copy the ready-to-use CSS.

Angle presets
Live preview
Gradient code — click to copy

Extract a color palette from an image

Upload an image and its dominant colors are extracted automatically. The image never leaves your device — it's processed entirely in your browser (Canvas) and never uploaded to a server. Tap one of the extracted colors to send it to the converter.

JPG, PNG, WebP… the most dominant colors will be extracted.

How do color codes work, and how do you convert between them?

A full explanation of the HEX, RGB, HSL, and HSV models, the conversion math, and WCAG contrast.

A color code converter lets you express the same color in different notations (HEX, RGB, HSL, HSV/HSB, CMYK) and move between them. All of these models describe the sRGB color space that screens use — so a HEX code and its RGB or HSL equivalent describe the exact same color, just written differently. This tool performs every conversion with standard algorithms, without any external library.

How do you convert a HEX color code to RGB?

Quick answerA HEX code is written as #RRGGBB; each two-character block represents one color channel in base 16 (hexadecimal). To convert to base 10: #7C3AED → 7C=124, 3A=58, ED=237, i.e. rgb(124, 58, 237). The three-character shorthand (#RGB) is expanded by repeating each character twice: #F0A → #FF00AA.
  • RR — the red channel, 00–FF (0–255).
  • GG — the green channel, 00–FF (0–255).
  • BB — the blue channel, 00–FF (0–255).
  • AA (optional) — in an 8-digit HEX, the last block is the alpha (opacity) channel.

What are HSL and HSV? How do they differ from RGB?

Quick answerHSL (Hue-Saturation-Lightness) and HSV/HSB (Value/Brightness) describe a color along hue, saturation, and lightness/brightness axes that feel intuitive to humans. RGB works with three light channels; HSL/HSV work around the color wheel instead. Their difference is the third component: in HSL, L=50% gives the pure color; in HSV, V=100% gives the most vivid color.

In practice, when you want to take a brand color and produce lighter and darker shades of it, HSL is the most useful model: keep the hue (H) and saturation (S) fixed and vary only the lightness (L). The "Tints & shades" palette on this page does exactly that. Design programs' color pickers usually use HSV, because a "brightness" slider is visually easier to grasp.

How is the WCAG contrast ratio calculated?

Quick answerFirst, each color's relative luminance is found. Each sRGB channel is divided by 255 and linearized: c ≤ 0.03928 ? c/12.92 : ((c+0.055)/1.055)^2.4. Then L = 0.2126·R + 0.7152·G + 0.0722·B. The contrast ratio is (L1 + 0.05) / (L2 + 0.05) — L1 the lighter, L2 the darker color's luminance. The result falls between 1:1 and 21:1.

This formula accounts for the fact that the human eye is most sensitive to green and least sensitive to blue (the 0.7152 and 0.0722 coefficients). That's why even a seemingly "light" pair like yellow-on-white can fail contrast checks. Use the contrast tool above to see the ratio and AA/AAA results live for any two colors.

Targets for accessible color contrast

Quick answerNormal text: AA ≥ 4.5:1, AAA ≥ 7:1. Large text (≈18pt, or 14pt bold and above): AA ≥ 3:1, AAA ≥ 4.5:1. UI components and graphical objects generally need 3:1. Keeping your text above these thresholds means users with low vision can read your content comfortably too.

Reference tables

HEX/RGB/HSL equivalents for basic colors, WCAG contrast thresholds, where each format is typically used, and an alpha (opacity) → HEX conversion table.

HEX, RGB, and HSL equivalents of basic colors (sRGB)
ColorHEXRGBHSL
Black#0000000, 0, 00, 0%, 0%
White#FFFFFF255, 255, 2550, 0%, 100%
Red#FF0000255, 0, 00, 100%, 50%
Green (lime)#00FF000, 255, 0120, 100%, 50%
Blue#0000FF0, 0, 255240, 100%, 50%
Yellow#FFFF00255, 255, 060, 100%, 50%
Cyan#00FFFF0, 255, 255180, 100%, 50%
Magenta#FF00FF255, 0, 255300, 100%, 50%
Orange#FFA500255, 165, 039, 100%, 50%
Purple (this tool)#7C3AED124, 58, 237262, 83%, 58%
Gray#808080128, 128, 1280, 0%, 50%

HSL values are rounded to the nearest whole number. Type any HEX into the converter above to see its exact equivalent.

WCAG 2.1 minimum contrast ratio thresholds
Content typeAA (minimum)AAA (enhanced)
Normal text (< 18pt / 14pt bold)4.5:17:1
Large text (≥ 18pt or 14pt bold)3:14.5:1
UI component / graphical object3:1—
Decorative / disabled elementNot requiredNot required

18pt ≈ 24px, 14pt bold ≈ 18.66px. The contrast ratio can be at most 21:1 (pure black on pure white).

Color formats and typical use cases
FormatExampleWhere it's used
HEX#7C3AEDCSS, design, web — most common
HEX + alpha#7C3AED80Semi-transparent color (CSS, mobile)
RGBrgb(124, 58, 237)CSS, channel-based operations
RGBArgba(124, 58, 237, .5)CSS that needs opacity
HSLhsl(262, 83%, 50%)Hue/lightness tuning, theme generation
HSV / HSBhsv(262, 76%, 93%)Design tool color pickers
CMYKcmyk(48, 76, 0, 7)Print (approximate conversion)
OKLCHoklch(54.1% 0.247 293)Modern CSS; wide gamut, perceptually consistent lightness
LABlab(43.4% 64.8 -79.1)Device-independent; color-difference (ΔE) measurement
LCHlch(43.4% 102.2 309.3)The cylindrical (hue/chroma) form of LAB
Opacity (alpha) percentage → 8-digit HEX last block
OpacityDecimal (0–1)HEX (00–FF)
100% (fully opaque)1.00FF
90%0.90E6
75%0.75BF
50% (semi-transparent)0.5080
25%0.2540
10%0.101A
0% (fully transparent)0.0000

HEX alpha = the hexadecimal form of round(opacity × 255). Move the alpha slider above and the 8-digit HEX updates automatically.

Popular colors

Add this tool to your site (embed code)

Embed the color converter on your own website for free. Copy the code below into your HTML — the tool runs in a simplified view and links back to this page as its source.

The embedded tool has a fixed layout; you can adjust the height value to fit your site. No ads or personal data, runs entirely client-side.

Color terms glossary

Short definitions of the core terms used in color codes and accessibility checks.

HEXA notation that writes a color in base 16 as #RRGGBB. The most common format in web and design.
RGBDefines a color by the 0–255 amount of red, green, and blue light (an additive model).
HSLHue (0–360°), Saturation (%), Lightness (%). Useful for deriving themes and tonal variants.
HSV / HSBHue, Saturation, Value/Brightness. The standard model behind most design tools' color pickers.
CMYKThe print model that works with Cyan, Magenta, Yellow, and Key (black) ink (a subtractive model).
Alpha (opacity)A color's transparency; 0 is fully transparent, 1 is fully opaque. Written as RGBA or 8-digit HEX.
HueThe angle on the color wheel; 0° is red, 120° is green, 240° is blue.
SaturationA color's vividness; 0% is a shade of gray, 100% is the most vivid form.
Relative luminanceThe perceived brightness of a color to the eye; the basis of the contrast ratio calculation.
Contrast ratioThe luminance difference between two colors; found with (L1+0.05)/(L2+0.05), ranging 1:1–21:1.
WCAGWeb Content Accessibility Guidelines; the W3C's web accessibility standard (AA/AAA levels).
Complementary colorThe hue directly opposite on the color wheel (H+180°); gives the strongest contrast.
Analog colorsNeighboring hues (H±30°); create a harmonious, calm palette.
Triadic paletteThree evenly spaced hues on the wheel (H, H+120°, H+240°); vivid and balanced.
sRGBThe default color space of screens and the web; HEX/RGB/HSL all describe this space.
OKLCHA modern, perceptually uniform color space: Lightness, Chroma, Hue. Preferred in CSS for its wide gamut and consistent lightness.
LAB / LCHA device-independent color space based on CIELAB; measures color difference (ΔE) close to human perception. LCH is its cylindrical (hue/chroma) form.
Color blindnessDifficulty distinguishing colors; the most common types are protanopia and deuteranopia (red-green) and tritanopia (blue-yellow).

In-depth guides

The most common questions about color codes and accessibility, answered.

How do I build a full palette from a brand color?

Enter your primary color in the converter above. The tints & shades palette keeps hue and saturation fixed and steps the lightness (L) from 50 to 900, giving you a color scale ideal for buttons, borders, and background layers. Then the analog palette (H±30°) gives soft accent colors, the complementary palette (H+180°) gives a strong action color, and the triadic palette gives a vivid three-color combination.

A common approach in professional interfaces: one primary brand color plus a tint ramp, one complementary accent, and a scale of neutral grays. Test every color you pick as text/background with the contrast tool and make sure it clears the AA threshold.

Is my text color readable enough? How do I know?

Enter your text color as the foreground and your background color in the WCAG contrast section above. If the ratio is below 4.5:1 you fall short of AA for normal-size text — aim for at least that. For large headings (≈24px+), the threshold drops to 3:1. The tool's badges mark each threshold pass/fail, and the live preview below shows real-world readability.

Tip: to boost contrast, lightening the background a little (or lowering the color's lightness in HSL) usually gives a cleaner result than just darkening the text. Yellow, light green, and pastel tones often fail on a white background.

What is 8-digit HEX (alpha) for, and how do you read it?

#RRGGBBAA adds an opacity (alpha) channel to a standard color, written as 8 hex digits. The last two characters range from 00 (fully transparent) to FF (fully opaque). For example #7C3AED80 is purple at roughly 50% opacity — the same as rgba(124, 58, 237, .5).

The percentage → HEX conversion is round(opacity × 255): 50% → 128 → 80, 75% → 191 → BF. Move the alpha slider above and both the RGBA and 8-digit HEX outputs update instantly; the "Alpha → HEX" reference table lists the most common values.

Explore all ToolPico tools →

Frequently asked questions

How do you convert a HEX color code to RGB?
A HEX code is written as #RRGGBB, and each two-character block represents a channel in base 16. To convert to base 10, convert each block: #7C3AED → 7C=124, 3A=58, ED=237, i.e. rgb(124, 58, 237). The three-character shorthand (#RGB) is expanded by repeating each character twice: #F0A → #FF00AA.
What is HSL?
HSL is a color model made of Hue (0–360°), Saturation (%), and Lightness (%). It's more intuitive to humans than RGB: keeping the hue fixed while changing the lightness easily produces lighter or darker versions of a color. HSL and RGB describe the same sRGB color and convert between each other exactly.
How is the WCAG contrast ratio calculated?
Each color's relative luminance is found: each sRGB channel is normalized to 0–1 and linearized with c ≤ 0.03928 ? c/12.92 : ((c+0.055)/1.055)^2.4, then summed as L = 0.2126·R + 0.7152·G + 0.0722·B. The contrast ratio is found with (L1 + 0.05) / (L2 + 0.05) (L1 the lighter, L2 the darker color). The result ranges from 1:1 to 21:1.
How do you build a color palette?
The most common methods rely on color-wheel relationships: complementary (H+180°) gives strong contrast, analog (H±30°) gives harmonious transitions, triadic (H, H+120°, H+240°) gives a vivid trio. Tints & shades are produced by keeping the hue fixed and raising or lowering the lightness (L). This tool derives all four automatically from your chosen color.
What's the difference between HSV and HSL?
Both use Hue and Saturation; their third component differs. In HSL, L=50% gives the pure color, 100% gives white, 0% gives black. In HSV/HSB, V=100% gives the most vivid color, 0% gives black; reaching white also requires lowering the saturation. Design tools usually use HSV; CSS supports the hsl() function.
What contrast ratio should I target for accessible color contrast?
Per WCAG 2.1, normal text needs at least 4.5:1 for AA and 7:1 for AAA; large text (≈18pt / 14pt bold and above) needs 3:1 for AA and 4.5:1 for AAA. UI components generally need 3:1. Keeping your text above these thresholds makes it comfortably readable for users with low vision too.
How is alpha (transparency) shown in a color code?
Alpha expresses opacity from 0 (fully transparent) to 1 (fully opaque). In CSS it's written as a decimal like rgba(124, 58, 237, .5) or as 8-digit HEX like #7C3AED80, where the last two characters are the alpha channel (00–FF). 50% opacity is roughly 80 in HEX. This tool produces alpha in both RGBA and #RRGGBBAA form.
Why does CMYK look different from HEX?
HEX/RGB is an additive model built for screens (adding light); CMYK is a subtractive model built for print (adding ink). Some vivid colors a screen can show can't be reproduced exactly with ink, so the CMYK conversion is an approximation. For exact print results, use the relevant ICC color profile or a Pantone reference.
What are OKLCH and LAB color codes?
Unlike screen-centric RGB, OKLCH and LAB are modern color spaces organized around human perception. LAB (CIELAB) is device-independent and measures the difference between two colors close to how the eye perceives it; LCH is its cylindrical (hue/chroma) form. OKLCH is built around Lightness, Chroma, and Hue axes, designed specifically for CSS with consistent lightness and a wide gamut: written like oklch(54.1% 0.247 293). This tool generates the color you pick in OKLCH, LAB, and LCH instantly.
How do I turn a color into Tailwind, Swift, or Flutter code?
When you pick a color, the tool automatically generates developer code output: a CSS variable (--color: #7C3AED;), SCSS ($color: #7C3AED;), a Tailwind arbitrary class (bg-[#7C3AED]), Swift UIColor, Android/Kotlin color int (0xFF7C3AED), and Flutter Color (Color(0xFF7C3AED)). You can copy each line with one click; if opacity is below 100% the output updates to 8-digit ARGB.
What is color blindness simulation for?
Roughly 8% of people (more often men) have some form of color blindness. The simulation shows approximately how your chosen color is perceived under protanopia, deuteranopia, tritanopia, and achromatopsia, so you can check whether color-only distinctions (like red/green status badges) stay distinguishable for these users too. Best practice is to never make color the only carrier of meaning, and to back it up with sufficient contrast.
How do I generate a Tailwind-style 50–950 shade scale?
Scroll to the Shade & tint scale section: the hue and saturation of your picked color stay fixed while lightness steps from 50 (lightest) to 950 (darkest) — the same numbering Tailwind CSS uses for its palette. Your base color is mapped to its nearest step. Copy the full ramp as CSS variables or a Tailwind config colors object with one click.
How do I build a CSS gradient from my color?
In the CSS gradient generator section, your picked color becomes stop 1; add a second color (and an optional third), choose an angle from 0–360°, and the tool outputs a ready linear-gradient() value with a live preview. Click the code to copy it straight into your stylesheet.

Methodology & sources

ToolPico's Color Converter is a free, independent tool. Conversions apply standard sRGB color space math directly: HEX ↔ RGB uses base-16 conversion; RGB ↔ HSL and RGB ↔ HSV normalize each channel to 0–1 and apply the standard hue/saturation/lightness formulas; CMYK uses a simple subtractive conversion. The contrast section applies the WCAG 2.1 relative luminance definition (c ≤ 0.03928 ? c/12.92 : ((c+0.055)/1.055)^2.4 and L = 0.2126·R + 0.7152·G + 0.0722·B) and the (L1+0.05)/(L2+0.05) contrast ratio formula exactly. All calculations run entirely in your browser; no color data is ever sent to a server.

Basis: sRGB color space conversions (IEC 61966-2-1) · WCAG 2.1 contrast ratio (W3C) · CIE-based relative luminance coefficients. Last updated: July 19, 2026. Color conversion and contrast formulas are standard and fixed; this page is reviewed periodically to stay current. Results are for informational purposes only — actual on-screen appearance can vary with monitor calibration and print profile.

🔗 Add this tool to your site

Copy the code below into your own site. The tool is free, always up to date, and runs entirely on your page. No sign-up required.

Preview →
⚡ Built with ToolPico · toolpico.com