HEX to RGB Converter

Professional color conversion tool with real-time preview, WCAG accessibility testing, and advanced features. Convert HEX to RGB, generate color palettes, create gradients, and export in multiple formats.

PICK COLOR

ON BLACK 9.00:1 AAA (Pass)

ON WHITE 2.33:1 Fail

CONVERSION RESULT

HEX #3B82F6

RGB 59, 130, 246

ENTER HEX CODE

RED 59

GREEN 130

BLUE 246

FORMATS

rgb(59, 130, 246)

hsl(217, 91%, 60%)

cmyk(76%, 47%, 0%, 4%)

Interior Design

Bedroom walls

Home office

Bathroom vanity

Pairs with:

Color Mixing

Blue 85%

White 15%

Start with ultramarine blue. Add tiny red for purple-blue, white for lighter shades.

Tints (Lighter)

Shades (Darker)

COMPLEMENTARY

TRIADIC

SPLIT COMPLEMENTARY

ANALOGOUS

PRIMARY #3B82F6

SECONDARY #F6823B

ACCENT #82F63B

NEUTRAL #E8EEF7

Click "Copy CSS" to copy gradient code

COLOR 1

COLOR 2

STEPS (5)

DIRECTION

CSS VARIABLES

:root {
  --primary: #3b82f6;
  --primary-rgb: 59, 130, 246;
  --secondary: #f6823b;
  --accent: #82f63b;
}

TAILWIND CONFIG

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': {
          DEFAULT: '#3b82f6',
          50: '#eff6ff',
          ...
        }
      }
    }
  }
}

SCSS VARIABLES

$primary-color: #3b82f6;
$secondary-color: #f6823b;
$accent-color: #82f63b;
$neutral-color: #f1f5f9;

JSON OBJECT

{
  "hex": "#3b82f6",
  "rgb": "59, 130, 246",
  "hsl": "217, 91%, 60%",
  "name": "Royal Blue"
}

My Color Library

Save your favorite colors. Synced across all color tools.

Import format info

Import a JSON file with this format:

[
  {"hex": "#FF8C00", "name": "Orange"},
  {"hex": "#3B82F6", "name": "Blue"}
]

What This Tool Does

Color Conversion HEX, RGB, HSL, CMYK formats

Accessibility Check WCAG contrast ratios

Color Harmonies Complementary, triadic, analogous

Gradients Create smooth color transitions

Export Options CSS, Tailwind, SCSS, JSON

Keyboard Shortcuts

Ctrl+C Copy RGB

Ctrl+V Paste HEX

R Random color

S Save to library

Professional Color Conversion Made Easy

Color is the foundation of visual design. Whether you're a web developer implementing a design system, a graphic designer creating brand guidelines, or a UI/UX professional ensuring accessibility compliance, having precise color conversion tools is essential.

Our HEX to RGB Converter provides instant, accurate color conversions with advanced features designed for modern workflows. Beyond simple conversion, we offer comprehensive color analysis including WCAG accessibility testing, automatic generation of shades and tints, color harmony schemes, gradient creation, and export in multiple formats.

How to Use the HEX to RGB Converter

Enter Your HEX Code

Type or paste a HEX color code (e.g., #3B82F6 or 3B82F6) in the input field, or click "Pick Color" to use the visual color picker.

Check Accessibility

View WCAG contrast ratios against black and white backgrounds. AA and AAA compliance badges show instantly.

Explore Variations

Navigate through tabs to generate shades, tints, color harmonies, palettes, or gradients.

Export and Save

Copy individual colors, export code in your preferred format, or save to your personal library.

Key Features

Real-Time Conversion

Instant bidirectional conversion between HEX, RGB, HSL, and CMYK formats.

WCAG Accessibility

Automatic contrast ratio calculations with AA and AAA compliance indicators.

Shades & Tints

Generate lighter tints and darker shades automatically for design systems.

Color Harmony

Explore complementary, triadic, split-complementary, and analogous schemes.

Gradient Generator

Create smooth gradients with customizable color stops.

Multi-Format Export

Export in CSS Variables, Tailwind Config, SCSS, or JSON format.

Frequently Asked Questions

How do I convert HEX to RGB?

Simply enter a HEX color code (e.g., #3B82F6 or 3B82F6) in the input field. The conversion happens instantly in real-time. You can also use the color picker button to select any color visually.

What is WCAG color accessibility?

WCAG (Web Content Accessibility Guidelines) defines contrast ratios to ensure text is readable. AA level requires 4.5:1 contrast ratio, while AAA requires 7:1. Our tool automatically checks your color against black and white backgrounds.

How do I generate color harmonies?

Go to the Harmony tab to see complementary, triadic, split-complementary, and analogous color schemes automatically generated from your selected color. Click any color to use it as the main color.

Can I save my favorite colors?

Yes! Click the "+" button in My Library or press "S" on your keyboard to save colors. All saved colors are stored locally in your browser and persist between sessions.

What export formats are supported?

You can export colors in CSS Variables, Tailwind Config, SCSS Variables, and JSON formats. Use the Export Code tab to copy the code in your preferred format.