Logo

🔒 Runs in your browser — nothing is uploaded✓ Free, no signup

Color Picker & Converter — HEX, RGB, HSL & CMYK

Pick a color or type any color code to convert it between HEX, RGB, HSL and CMYK. See WCAG contrast against white and black text, plus tints and shades.

#6D28D9

Color codes

  • HEX#6D28D9
  • RGBrgb(109, 40, 217)
  • HSLhsl(263, 70%, 50%)
  • CMYKcmyk(50%, 82%, 0%, 15%)

Contrast (WCAG)

White text on this color

7.1:1 — AAA

Black text on this color

2.96:1 — Fails

Tints and shades

  • #F0E9FB
  • #D1BBF3
  • #B18DEB
  • #925FE3
  • #7231DB
  • #5920B6
  • #431887
  • #2C1059
  • #15082B

When should you use the Color Picker & Converter?

  • Converting a brand HEX code to RGB or HSL for CSS
  • Checking whether white or black text is readable on a background color
  • Building lighter and darker variations of a color for a UI palette

How to use the Color Picker & Converter

  1. 1

    Choose a color

    Use the color picker, or type a HEX, RGB, HSL value or CSS color name.

  2. 2

    Copy the format you need

    HEX, RGB, HSL and CMYK update together. Click Copy next to any of them.

  3. 3

    Check contrast

    See whether white or black text on this color passes WCAG AA or AAA.

  4. 4

    Explore shades

    Click a tint or shade to make it the current color.

Examples

Converting a HEX code

Input

#FF6347

Output

RGB   rgb(255, 99, 71)
HSL   hsl(9, 100%, 64%)
CMYK  cmyk(0%, 61%, 72%, 0%)

Common errors and how to fix them

My color isn't recognised
Check the format: HEX needs 3, 4, 6 or 8 hex digits; rgb() values must be 0–255; hsl() saturation and lightness must be percentages.
The HEX code has 8 digits
The last two digits are transparency (alpha). For example #00000080 is black at 50% opacity.
Related tools: CSS Gradient Generator · PX to REM Converter · CSS Minifier

Explore More Developer Tools

Format, Validate, and Generate Data Instantly

TrueFormatter provides essential utilities for modern web development, including JSON formatting, YAML conversion, and more.

JSON Auto-Fixer & Formatter

Repair, validate, and beautify broken JSON (missing quotes, trailing commas).

JSON Validator & Linter

Check JSON syntax and see the exact line and column of every error.

JSON Beautifier

Pretty-print and indent JSON for easy reading and debugging.

JSON Compare & Diff Tool

Find the difference between two JSON objects visually and quickly.

JSONPath Tester

Evaluate JSONPath expressions with filters and recursive queries.

JSON Schema Generator

Generate a JSON Schema from any sample JSON document.

JSON to CSV Converter

Flatten nested JSON arrays into CSV for spreadsheets.

YAML ⇆ JSON Converter

Convert YAML to JSON or JSON to YAML instantly.

CSV to JSON Converter

Convert CSV or TSV data to a JSON array of objects, with type detection.

JSON to TypeScript

Generate TypeScript interfaces from any JSON sample.

JWT Decoder

Decode and inspect JSON Web Tokens (JWT) Header and Payload.

JWT Generator

Create and sign HS256/HS384/HS512 JSON Web Tokens for testing.

Hash Generator (MD5, SHA)

Generate MD5, SHA-1, SHA-256, SHA-384 and SHA-512 hashes.

Password Generator

Generate strong, random passwords with the length and characters you choose.

Base64 Encoder ⇆ Decoder

Encode text to Base64 and decode Base64 to text for API debugging.

URL Encoder & Decoder

Cleanly encode special characters in URLs and decode query strings.

SQL Formatter & Beautifier

Format SQL queries for MySQL, PostgreSQL, SQL Server, SQLite and more.

CSS Minifier & Compressor

Optimize CSS by removing whitespace and comments to accelerate page load time.

JS Minifier & Compressor

Compress JavaScript to improve website speed and performance.

HTML Formatter & Beautifier

Beautify or minify HTML with clean, consistent indentation.

Markdown Editor & Preview

Write Markdown with a live preview and copy the HTML.

Word & Character Counter

Count words, characters, sentences and reading time as you type.

Case Converter

Convert text to camelCase, snake_case, kebab-case, Title Case and more.

Text Diff & Compare

Compare two texts and highlight every added and removed word or line.

Lorem Ipsum Generator

Generate placeholder paragraphs, sentences or words as text or HTML.

Fancy Text & Font Generator

Turn text into 𝐛𝐨𝐥𝐝, 𝘪𝘵𝘢𝘭𝘪𝘤, 𝓈𝒸𝓇𝒾𝓅𝓉 and other Unicode font styles you can paste anywhere.

Color Picker & Converter

Pick a color and convert between HEX, RGB and HSL instantly.

Color Palette Generator

Generate harmonious color palettes and export them as CSS, Tailwind or JSON.

CSS Gradient Generator

Build linear and radial CSS gradients visually and copy the code.

PX to REM Converter

Convert pixels to rem and rem to pixels for any root font size.

Regex Tester & Debugger

Test JavaScript regular expressions with live match highlighting and groups.

Cron Expression Generator

Build cron schedules, read them in plain English and preview next runs.

UUID / GUID Generator

Generate unique V4 UUIDs for database keys or testing.

Epoch converter online

Convert UNIX timestamps to human-readable dates and back instantly.

Time Zone Converter

Convert a time between time zones and compare cities side by side.

Random Number Generator

Generate random numbers in any range — unique, sorted or decimals.

Crop Image Online

Crop images exactly as selected with fixed aspect ratios. No upload, no resize, no quality loss.

Compress Image Online

Compress JPG, PNG & WebP images directly in your browser. No upload, no tracking, instant download.

Image Resizer

Resize images to exact pixels or a percentage, keeping the aspect ratio.

Image Converter (PNG, JPG, WebP)

Convert images between PNG, JPG and WebP in your browser.

Image to Base64

Convert an image to a Base64 data URI for CSS, HTML or JSON.

Color Picker & Converter FAQ

Type or paste the HEX code (for example #FF6347) into the input. The RGB value — rgb(255, 99, 71) — appears instantly along with HSL and CMYK, each with a Copy button.

HEX (#RGB, #RRGGBB and #RRGGBBAA with transparency), rgb() and rgba(), hsl() and hsla(), and CSS color names such as tomato or rebeccapurple. Output is HEX, RGB, HSL and CMYK.

RGB describes a color by its red, green and blue light. HSL describes it by hue (the color on the wheel), saturation (how vivid) and lightness. HSL is easier for creating lighter or darker variations of the same color.

It's a standard mathematical conversion and a good starting point. Professional printing uses color profiles, so check with your printer for exact CMYK values.

They follow WCAG 2 accessibility guidelines. A ratio of 4.5:1 or higher passes AA for normal text, 3:1 passes AA for large text, and 7:1 passes AAA. Use them to choose readable text colors.

They keep the same hue and saturation and change only the lightness, from very light to very dark. Click any swatch to use it as the current color.