MyDevTools
EN

Color Converter

Convert colors between HEX, RGB, HSL and CMYK, get a 9-step shades palette and check WCAG contrast between two colors in your browser.

Your inputs and files stay in your browser

Color

Examples: #3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%), cmyk(76%, 47%, 0%, 4%)

Converted Formats

Contrast Checker

Sample Text16 px

Sample Text24 px

Large text means at least 24 px regular or about 18.67 px bold.

Contrast Ratio—

    Tints and Shades

    Mixed with black (shades) and white (tints) in linear-light sRGB. Click a swatch to copy its HEX.

    On this page

    Paste a CSS color in any common notation and get the same color as HEX, RGB, HSL and CMYK, ready to copy. The page also builds a palette of lighter and darker shades and checks the WCAG contrast ratio of a text and background pair.

    Detailed Functionality

    The format is detected automatically: #3b82f6, short #38f (the hash is optional), rgb(59, 130, 246) or rgba(…) with 0–255 or percentage channels, hsl(217, 91%, 60%) with an optional deg unit, and cmyk(76%, 47%, 0%, 4%). Space-separated CSS syntax such as rgb(59 130 246 / 50%) works as well; the alpha value is accepted but ignored, because the outputs have no transparency. Invalid or out-of-range values are flagged with an error instead of being guessed. You can also pick a color with the native color picker.

    The tints and shades palette mixes the current color with black (shades) and white (tints) at 20, 40, 60 and 80% in linear-light sRGB — nine swatches with the original in the middle; clicking a swatch copies its HEX code. The contrast checker takes a text and a background color and reports the ratio together with the four WCAG 2.x thresholds: AA 4.5:1 and AAA 7:1 for normal text, AA 3:1 and AAA 4.5:1 for large text.

    All conversions are plain JavaScript formulas running on the page — nothing is uploaded. CMYK is the simple device-independent formula without an ICC profile, so use it for rough print hints, not for prepress proofs. HSL and CMYK values are rounded to whole numbers, so converting them back may differ from the original by one unit.

    Practical Examples

    HEX to everything: #3b82f6 gives rgb(59, 130, 246), hsl(217, 91%, 60%) and cmyk(76%, 47%, 0%, 4%).

    HSL to HEX: hsl(0, 100%, 50%) converts to #FF0000, as does cmyk(0%, 100%, 100%, 0%).

    Contrast check: grey #777777 text on a white #ffffff background has a ratio of 4.48:1 — it passes AA for large text (3:1) but fails AA for normal text (4.5:1).

    Default pair: the preset #1e3a8a on #ffffff reaches 10.36:1 and passes all four WCAG levels.

    How to Use This Tool

    1. Enter a color

      Type or paste a value into Manual Input (HEX, rgb(), hsl() or cmyk()) and press Convert or Enter, or choose a color with Color Picker.

    2. Copy the format you need

      In Converted Formats, click the copy button next to HEX, RGB, HSL or CMYK.

    3. Copy a tint or shade

      In Tints and Shades, click a swatch to copy its HEX code.

    4. Check contrast

      In Contrast Checker, set Foreground Color and Background Color and read the ratio and the AA/AAA results.

    Tips and Best Practices

    • The # is optional and three-digit shorthand works: 38f is read as #3388FF.
    • Hue may be written with or without deg; saturation and lightness need values from 0 to 100.
    • Values outside the valid range (for example rgb(300, 0, 0)) are rejected instead of being silently clamped.
    • For body text aim for at least 4.5:1; 3:1 is enough only for large text (24 px, or 18.66 px bold).
    • Do not rely on the CMYK output for print production — ask your printer for values based on their ICC profile.