🎨 Color Tool

Free Online HEX to RGB Color Converter

Convert between HEX, RGB, HSL, HSV, CMYK, CSS and more. Generate shades, palettes, and check contrast ratios instantly.

HEX → RGB RGB → HEX HSL / HSV CMYK CSS Variables Shades & Tints Palette Generator Contrast Checker
Quick Color Swatches
#1A56DB
Click to open color picker
#
RGB Sliders
R26
G86
B219
A100%
HSL Sliders
H222°
S79%
L48%
All Color Formats
Nearest CSS Named Colors
Base Color
#
⚙️ Options
Tints (Lighter)
Light ←————————————————————————→ Base
Shades (Darker)
Base ←————————————————————————→ Dark
#
⚙️ Palette Type
Foreground Color
#
Background Color
#

What Is HEX to RGB Conversion and Why Does It Matter?

Colors on the web and in digital design can be represented in many different formats, each serving a different purpose. HEX (hexadecimal) color codes are the most widely used format in web design — a six-character string like #1A56DB that represents the red, green and blue components of a color in base-16 notation. RGB (Red, Green, Blue) represents the same color as three decimal numbers between 0 and 255, making it more intuitive to understand and manipulate programmatically.

Converting between color formats is an essential skill for web developers, UI designers, graphic artists and anyone working with digital color. Our color converter supports eight major color formats and provides advanced tools like shade generation, palette creation and WCAG contrast checking — all in one place, completely free and private.

🔄
Color Converter
Convert between HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK and CSS formats instantly with live preview.
🌈
Shades & Tints
Generate 5–20 lighter tints and darker shades of any color. Export as CSS, Tailwind config or hex list.
🎨
Palette Generator
Create complementary, analogous, triadic, tetradic and monochromatic palettes from any base color.
⚖️
Contrast Checker
Check WCAG AA and AAA contrast ratios for text accessibility compliance between any two colors.
🖱️
Interactive Sliders
Adjust colors in real time using RGB and HSL sliders, or use the native color picker for precise selection.
🔒
100% Private
All color calculations run in your browser. No data is ever sent to any server.

Understanding Color Formats — A Complete Guide

Each color format has its own strengths and is used in different contexts. Here is a complete overview of all the formats supported by our converter:

  • HEX (#RRGGBB): The most common web format. Six hexadecimal digits (0–9, A–F) representing red, green and blue channels. Shorthand like #FFF is also valid for #FFFFFF. An 8-digit variant (#RRGGBBAA) supports alpha transparency.
  • RGB (Red, Green, Blue): Three values from 0 to 255, each controlling the intensity of red, green and blue light. RGB(26, 86, 219) is the standard CSS syntax. RGBA adds a fourth value for opacity from 0 to 1.
  • HSL (Hue, Saturation, Lightness): A more human-intuitive model. Hue is a degree on the color wheel (0–360), saturation is color intensity (0–100%), and lightness controls brightness (0% = black, 100% = white). Great for creating color variations.
  • HSV / HSB (Hue, Saturation, Value/Brightness): Similar to HSL but used widely in design tools like Photoshop and Figma. Value (0–100%) represents brightness differently from lightness in HSL.
  • CMYK (Cyan, Magenta, Yellow, Black): The standard format for print design and professional printing. Each channel is a percentage from 0–100%. CMYK works with subtractive color mixing unlike RGB which uses additive mixing.
  • CSS Color Names: CSS has 148 named colors like "royalblue", "coral" or "mediumseagreen". Our tool shows the nearest named CSS color to any color you enter.
  • CSS Variables: Output as CSS custom property syntax (--color-primary: #1a56db) for easy copy-pasting into stylesheets.

How to Use This Color Converter

  • Color Converter tab: Enter a HEX code, adjust RGB values numerically, or drag the RGB and HSL sliders. All formats update in real time. Click the color preview box or the color swatch to open the native browser color picker.
  • Shades & Tints tab: Enter your base color and choose how many steps to generate (5–20). Get a complete range of lighter tints and darker shades. Copy as a hex list, CSS custom properties, or a Tailwind CSS configuration object.
  • Palette Generator tab: Enter a base color and select a harmony type — complementary (opposite on color wheel), analogous (adjacent), triadic (three evenly spaced), split-complementary, tetradic (four colors) or monochromatic (same hue, different lightness).
  • Contrast Checker tab: Enter a foreground (text) color and a background color to check their contrast ratio against WCAG 2.1 accessibility guidelines. Results show AA and AAA compliance for both normal and large text sizes.
Frequently Asked Questions
Both HEX and RGB represent the same colors — just in different formats. HEX uses base-16 notation (hexadecimal digits 0–9 and A–F) while RGB uses base-10 decimal numbers from 0 to 255. For example, #1A56DB and RGB(26, 86, 219) are the exact same color. HEX is more compact and commonly used in HTML/CSS, while RGB is more intuitive for programmatic manipulation.
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable for users with visual impairments. A ratio of 4.5:1 is required for AA compliance (normal text), and 3:1 for large text (18pt+ or 14pt+ bold). AAA compliance requires 7:1 for normal text. Our contrast checker computes the ratio and shows which WCAG levels pass or fail so you can build accessible websites.
Both HSL and HSV use Hue and Saturation but differ in the third channel. HSL (Lightness) ranges from 0% (black) through the pure color (50%) to 100% (white), making it symmetrical. HSV (Value/Brightness) ranges from 0% (black) to 100% (full brightness), which matches more closely how design tools like Photoshop display colors. HSL is more common in CSS while HSV is standard in most design applications.
RGB and CMYK have different color gamuts (ranges of representable colors). RGB uses additive color mixing (for screens and displays), while CMYK uses subtractive mixing (for physical inks on paper). Some colors that can be displayed on screen (especially vibrant blues and greens) cannot be reproduced in CMYK print, and vice versa. Our converter provides a mathematical approximation — for professional print work, always verify with your printer's color profiles.
Color harmony refers to aesthetically pleasing combinations of colors based on their positions on the color wheel. Complementary colors are directly opposite (high contrast), analogous colors are adjacent (harmonious), triadic colors are evenly spaced at 120° (vibrant), and monochromatic colors share the same hue but vary in lightness (elegant). Our palette generator calculates these relationships by rotating the hue value in HSL color space while adjusting saturation and lightness as appropriate.
Tints are created by mixing a color with white — increasing the lightness value in HSL toward 100%. Shades are created by mixing with black — decreasing the lightness toward 0%. Our generator divides the lightness range into equal steps between the base color and pure white (tints) or pure black (shades), giving you a smooth, evenly distributed range ideal for design systems and Tailwind CSS color palettes.