Done
Home › RGB to HEX Converter

🎨 RGB to HEX Converter

Convert RGB color values to HEX codes instantly — plus HSL, HSV, CMYK, color harmonies, WCAG contrast checker & palette generator. 100% private, browser-based.

Quick Answer

How to Convert RGB to HEX?

Convert each RGB channel (0–255) to a 2-digit hexadecimal value, then join them with a # prefix. Example: rgb(245, 158, 11) → R= F5 , G= 9E , B= 0B → #F59E0B . Use the interactive tool below to convert instantly.

#F59E0B
rgb(245, 158, 11)
RGB Input
R 96%
G 62%
B 4%
#
Paste Any CSS Color
All Color Formats (click any card to copy)
HEX
#F59E0B
RGB
rgb(245, 158, 11)
HSL
hsl(38, 95%, 50%)
HSV / HSB
hsv(38, 96%, 96%)
CMYK
cmyk(0%, 36%, 96%, 4%)
CSS Name / Nearest
≈ orange
Shades & Tints
Shades (darker)
Tints (lighter)
Color Harmonies
Complementary
Analogous
Triadic
Split Complementary
WCAG Contrast Checker
ON WHITE (#FFFFFF)
—
—
ON BLACK (#000000)
—
—
Custom Background: —

WCAG 2.1 Standards: AA Normal Text ≥ 4.5:1 · AA Large Text ≥ 3:1 · AAA Enhanced ≥ 7:1

Conversion Log
; IndexCraft — RGB to HEX Converter
; Browser-based · No upload · 100% private
; ──────────────────────────────────────
; Adjust sliders or enter values to begin

How to Use the RGB to HEX Converter

Convert any RGB color to HEX in four simple steps:

1

Enter RGB Values

Drag the R, G, B sliders or type values (0–255) directly. Use the system color picker for visual selection.

2

View the HEX Code

The HEX code updates in real time in the preview hero and in the All Color Formats panel.

3

Copy Your Code

Click "Copy HEX" or click any format card (HEX, RGB, HSL, CMYK) to copy it to clipboard instantly.

4

Explore the Palette

Use harmonies, shades, tints, and the contrast checker to build an accessible, cohesive color palette.

RGB to HEX Conversion Formula

To convert RGB to HEX manually, convert each decimal channel (0–255) to a two-digit hexadecimal number (00–FF) and concatenate them with a # prefix. 

// JavaScript: RGB to HEX converter functionfunctionrgbToHex(r, g, b) {
  return'#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('')
    .toUpperCase();
}

// Example: rgb(245, 158, 11) → #F59E0B
rgbToHex(245, 158, 11); // → "#F59E0B"// Manual steps:// R: 245 ÷ 16 = 15 rem 5  → F5// G: 158 ÷ 16 = 9  rem 14 → 9E// B:  11 ÷ 16 = 0  rem 11 → 0B// Result: #F59E0B
Color History
Save colors to see them here
Popular Colors
Keyboard Shortcuts
Alt+R Random color
Alt+C Copy HEX
Alt+P Open picker
Alt+X Reset
Ctrl+↵ Convert & copy
Color Models
RGB
Red, Green, Blue. Additive model for screens. Each channel 0–255.
HEX
Hexadecimal RGB. Compact 6-digit code (#RRGGBB) for web CSS.
HSL
Hue, Saturation, Lightness. Intuitive for creating color variations.
HSV
Hue, Saturation, Value (Brightness). Common in design software.
CMYK
Cyan, Magenta, Yellow, Key (Black). Subtractive model for print.
Privacy
🔒 100% Client-Side
All conversions happen in your browser. Nothing is sent to any server. No account required.

Common RGB to HEX Color Reference Table

Quick reference for frequently used colors across web design, CSS, and UI development. Click any row to load the color.

Color CSS Name HEX Code RGB Value HSL Use Case

When to Use Each Color Format

Different color formats are used in different contexts. Here's a quick guide to choosing the right one.

🌐

HEX in CSS/HTML

HEX codes are the most common format in web development. Use #RRGGBB in CSS stylesheets, HTML attributes, and design tools like Figma and Sketch.

🎨

RGB for Opacity

Use rgba() in CSS when you need transparency. The alpha channel (0–1) controls the opacity of an element without affecting its children.

🖌️

HSL for Theming

HSL is ideal for generating color palettes and design systems. Adjusting lightness from 10–90% reliably produces accessible dark and light variants of any hue.

🖨️

CMYK for Print

CMYK is the standard for professional printing. When sending designs to print shops, always convert to CMYK to ensure colors match physical ink output accurately.

🎭

HSV in Design Apps

Adobe Photoshop, Illustrator, and other design applications use the HSV/HSB model in their color pickers. It's excellent for selecting vibrant, saturated colors.

♿

Contrast for A11y

Always check WCAG contrast ratios when choosing text and background colors. AA compliance (4.5:1) is required for legal accessibility standards in many regions.

Complete Guide to RGB and HEX Color Systems

What is the RGB Color Model?

RGB (Red, Green, Blue) is an additive color model used by all digital screens — monitors, phones, and TVs. Colors are created by combining light at different intensities. Each channel ranges from 0 (no light) to 255 (full intensity). White is rgb(255,255,255) and black is rgb(0,0,0).

What is a HEX Color Code?

A HEX color code is a 6-character hexadecimal representation of an RGB color, prefixed with #. The format is #RRGGBB where each pair encodes one channel in base-16 (0–9, A–F). For example, #FF0000 is pure red. 8-digit HEX (#RRGGBBAA) also encodes an alpha channel for transparency.

HSL vs RGB: Which to Use?

RGB is machine-friendly; HSL is human-friendly. In HSL, you intuitively control the hue (color type, 0–360°), saturation (intensity, 0–100%), and lightness (brightness, 0–100%). To create a button hover state, for example, simply decrease lightness by 10% rather than calculating new R, G, B values.

Understanding Color Harmonies

  • Complementary: 2 colors 180° apart — high contrast, vibrant.
  • Analogous: 3 colors within 30° — calm, cohesive looks.
  • Triadic: 3 colors 120° apart — vibrant, balanced.
  • Split-complementary: Softer alternative to complementary.

WCAG Accessibility Standards

  • AA Normal Text: ≥ 4.5:1 contrast ratio
  • AA Large Text (18pt+): ≥ 3:1 contrast ratio
  • AAA Enhanced: ≥ 7:1 contrast ratio
  • AAA Large Text: ≥ 4.5:1 contrast ratio

Failing contrast can lead to inaccessible designs and legal compliance issues under WCAG 2.1 and Section 508.

Shades, Tints & Tones

A shade is a color mixed with black, making it darker. A tint is a color mixed with white, making it lighter. A tone is a color mixed with gray. Most design systems generate 9–11 shades/tints (e.g., Tailwind CSS 50–950) for a complete, flexible color scale.

Frequently Asked Questions

Everything you need to know about RGB to HEX color conversion.

How do I convert RGB to HEX?
Convert each RGB channel (0–255) to a two-digit hexadecimal number and concatenate them with a # prefix. For example, rgb(255, 99, 71) : R=255→ FF , G=99→ 63 , B=71→ 47 → #FF6347 (Tomato). You can also divide each value by 16 to get the two hex digits manually.
What is the formula for RGB to HEX conversion?
The formula is HEX = '#' + R.toString(16).padStart(2,'0') + G.toString(16).padStart(2,'0') + B.toString(16).padStart(2,'0') (uppercased). Each decimal value (0–255) maps to exactly two hexadecimal characters (00–FF). The padStart(2,'0') ensures values under 16 get a leading zero (e.g., 11 → 0B , not B ).
What is the difference between RGB and HEX?
RGB and HEX represent exactly the same colors — they're just different notations. RGB uses three decimal numbers separated by commas ( rgb(255, 165, 0) ), making individual channel values easy to read. HEX uses a single compact string ( #FFA500 ) preferred in CSS, HTML, and design tools. Converting between them is lossless.
Can I convert HEX back to RGB?
Yes. Split the 6-character HEX code into three pairs (RR, GG, BB) and convert each from hexadecimal to decimal using base-16 arithmetic. Example: #1E90FF → 1E=30, 90=144, FF=255 → rgb(30, 144, 255) (DodgerBlue). On this tool, simply type a HEX code into the HEX input and click Apply to convert it to RGB automatically.
What does RGBA mean and how is it different from RGB?
RGBA adds a fourth channel — Alpha — to the RGB model. Alpha controls transparency/opacity, ranging from 0 (fully transparent) to 1 (fully opaque) in CSS, or 0–255 in 8-digit HEX. For example, rgba(245, 158, 11, 0.5) is 50% transparent amber. Enable the Alpha toggle on this tool to include the alpha channel in all output formats.
What are WCAG contrast requirements?
WCAG 2.1 defines these minimum contrast ratios:

• AA Normal Text: 4.5:1 (body copy, UI labels)
• AA Large Text (18pt+/14pt bold+): 3:1
• AAA Enhanced Normal: 7:1
• AAA Large Text: 4.5:1

Use this tool's contrast checker to test your foreground color against any background instantly.
What is HSL and when should I use it?
HSL (Hue, Saturation, Lightness) describes color in human-intuitive terms. Hue is the color angle (0–360°), Saturation is intensity (0–100%), and Lightness is brightness (0–100%). Use HSL when building design systems or color scales — for example, generating 9 shades of a brand color by varying lightness from 10% to 90% while keeping hue and saturation constant.
What is CMYK and why is it different from RGB?
CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in printing. Physical inks absorb (subtract) light, so combining all colors produces black. RGB is additive — screen pixels emit light, so combining all channels produces white. When sending designs to print, always convert RGB to CMYK to ensure color accuracy, as not all RGB colors can be reproduced with CMYK inks.
What are the HEX codes for the most common colors?
Here are the most commonly used HEX codes:

Black #000000 · White #FFFFFF · Red #FF0000 · Green #008000 · Blue #0000FF · Yellow #FFFF00 · Orange #FFA500 · Purple #800080 · Pink #FFC0CB · Gray #808080 · Cyan #00FFFF · Magenta #FF00FF · Navy #000080 · Teal #008080 · Lime #00FF00

See the full reference table above for more colors with RGB, HSL values and use cases.
Is this tool free and does it store my data?
This tool is completely free with no account required. All color conversions run entirely in your browser using JavaScript — no color values, history, or preferences are sent to any server. The only data stored locally is your color history (in localStorage), which never leaves your device and can be cleared at any time.

About RGB to HEX Color Conversion

What is HEX Color?

HEX color is a 6-digit hexadecimal representation of RGB values. Each pair represents Red, Green, and Blue (00–FF). For example, #FF0000 is pure red (R:255, G:0, B:0). An 8-digit HEX code also includes an alpha (opacity) channel.

RGB vs HEX

RGB uses decimal values (0–255) while HEX uses hexadecimal (00–FF). They represent the same colors — HEX is more compact and universally used in CSS and HTML, while RGB makes individual channel values easy to read and adjust.

Web Accessibility

WCAG 2.1 guidelines require minimum contrast ratios: 4.5:1 for normal text (AA) and 7:1 for enhanced (AAA). Use the built-in contrast checker to ensure your text and background colors meet accessibility standards required by law in many jurisdictions.

Color Harmonies

Color harmonies are pleasing combinations based on positions on the color wheel: complementary (opposite, high contrast), analogous (adjacent, cohesive), triadic (equidistant, balanced), and split-complementary (softer contrast with variety).