Developer Tool

Color Picker & HEX/RGB Converter

Pick a color visually or enter a HEX / RGB value to convert between formats instantly. No dependencies, no uploads — everything runs in your browser.

Select Color

HEX Value

#6366F1

RGB Value

rgb(99, 102, 241)

TL;DR

What This Tool Does

HEX and RGB are two notations for the same 24-bit sRGB color model used by every CSS-compliant browser and digital display — HEX encodes each channel as a two-digit base-16 pair (#RRGGBB), while RGB expresses the same values as decimal integers (0–255 per channel), together representing 16,777,216 distinct colors. Conversion between the two is lossless and deterministic: no rounding, no approximation, identical round-trip output. This tool performs all processing client-side in your browser — no server calls, no data transmission, no account required.

What Are HEX and RGB Color Formats?

HEX

A HEX color is a six-character string prefixed with #. Each pair of characters represents the red, green, and blue channel as a base-16 number from 00 to FF. Example: #6366F1. As defined in the W3C CSS Color Module Level 4 specification, HEX notation is a compact shorthand for the rgb() function — 256 levels per channel, 16,777,216 (2²⁴) total colors.

RGB

An RGB color is expressed as three integers from 0 to 255 for the red, green, and blue channels. Example: rgb(99, 102, 241). RGB is the native color model of digital displays and all major browser rendering engines. Modern browsers default to the sRGB color space (standardized as IEC 61966-2-1), which precisely defines each channel's chromaticity and ensures consistent rendering across devices and operating systems.

Why Color Formats Matter in Modern Development

The choice of color format has direct consequences for UI consistency, toolchain compatibility, and cross-platform rendering. Understanding the distinction is essential for maintaining reliable design systems and avoiding subtle visual regressions.

UI Consistency Across Platforms: Design tokens defined in one format must translate accurately to others. A HEX value in a brand guide must produce an identical color when expressed as RGB in a React Native component or a Figma frame. Imprecise manual conversion introduces subtle inconsistencies across surfaces that accumulate at scale.
Cross-Platform Rendering Differences: While modern browsers default to the sRGB color space, older environments, native mobile renderers, and print workflows may interpret color values differently. Using well-defined HEX or rgb() values with explicit sRGB coordinates ensures predictable rendering wherever the color space is consistent.
Developer vs Designer Workflows: Designers typically work in RGB (Figma's default output) or HEX (exported from design specs). Engineers writing CSS often use HEX for static values and rgba() when alpha transparency is required. Bridging these workflows without conversion errors requires a reliable, deterministic tool.
Precision in Design Systems: Large-scale design systems — such as those built with Style Dictionary, Theo, or Tailwind CSS — store primitive color tokens as HEX and generate format-specific outputs for web, native, and print. A single incorrect conversion can cascade incorrect colors across an entire component library or product surface.

How HEX ↔ RGB Conversion Works

HEX and RGB describe the exact same color space — they are two syntactic representations of the same three numeric values. According to the W3C CSS Color Module Level 4, a six-digit HEX value like #6366F1 is mathematically identical to rgb(99, 102, 241). The conversion is exact and lossless in both directions.

HEX → RGB: Split the HEX string into three two-character pairs (RR, GG, BB). Parse each pair as a base-16 integer using parseInt("FF", 16). The three resulting decimal integers form the RGB triplet.
RGB → HEX: Clamp each channel to the 0–255 range. Convert each integer to its base-16 representation using Number.toString(16), then pad to two characters with a leading zero if necessary. Concatenate with a # prefix.

Example

#6366F1 → R=99 G=102 B=241

rgb(99, 102, 241) → #6366F1

HEX vs RGB vs HSL: Key Differences

CSS supports multiple color formats. HEX, RGB, and HSL are the three most widely used. Each has distinct strengths depending on context and workflow.

Property	HEX	RGB	HSL
Format	`#RRGGBB`	`rgb(R, G, B)`	`hsl(H, S%, L%)`
Readability	Compact; opaque to humans without a picker	Moderate; channel values visible as integers	High; hue, saturation, and lightness are intuitive
Primary use	CSS stylesheets, design tokens, brand specs	Canvas API, programmatic manipulation, data APIs	Theming, dynamic color generation, accessibility work
Alpha support	`#RRGGBBAA` (8-digit, CSS Level 4)	`rgba(R, G, B, A)`	`hsla(H, S%, L%, A)`
Strengths	Ubiquitous; shortest syntax for opaque colors	Native to display hardware; precise numeric control	Perceptually intuitive; easy to derive tints and shades
Limitations	Not human-readable without a color picker	Verbose; requires three separate integer values	Not natively understood by all APIs and older tools

All three formats are supported natively in all major browsers per the W3C CSS Color Module Level 4 specification. CSS Color Level 4 also introduces oklch() and lab() for perceptually uniform color spaces.

How to Use This Color Picker: Step-by-Step

Follow these steps to pick a color or convert between formats.

1

Select or enter a color

Use the Color Picker tab to open the native browser color picker and choose any color visually. Or switch to the HEX ↔ RGB Converter tab and type a value directly.
2

View the HEX and RGB values

Both values update in real time as you move the picker or type into any input field. A color swatch gives a live visual preview.
3

Convert between formats

In the Converter tab, paste a HEX code to get its RGB equivalent, or enter individual R, G, and B numbers to get the HEX code. Invalid entries show an error and do not break the tool.
4

Copy the result

Click Copy HEX or Copy RGB to copy the value to your clipboard. Confirmation appears inline.
5

Use in your project

Paste the copied value directly into CSS, Tailwind config, Figma, Swift, Kotlin, or any design or code context that accepts color values.

Use Cases

Web Development (CSS): CSS accepts both HEX and RGB syntax. Use this tool to switch between them when a design spec uses a different format than your codebase.
UI/UX Design: Figma and Sketch work in RGB. Most design tokens and style guides export HEX. Convert freely between the two without guessing or recalculating manually.
Branding Systems: Brand guidelines typically define colors in HEX for web and RGB for digital assets. This tool lets you derive either value from a single source of truth.
APIs and Frontend Systems: Some APIs require colors in RGB integer format; others expect HEX strings. Use this converter to transform values before passing them to chart libraries, analytics dashboards, or config files.

When to Use HEX vs RGB in Real Projects

Both formats are fully valid in CSS and most design tools. The right choice depends on the specific context and workflow requirements.

Use HEX in CSS stylesheets and design tokens: HEX is the most compact format for static, opaque colors in CSS. It has been supported since CSS1 and is the default output format of most design tools, brand guides, and color palette generators. When defining primitive color tokens (e.g., --color-primary: #6366f1), HEX keeps token files concise and portable.
Use RGB when alpha transparency is required: The rgba(R, G, B, A) function is the standard approach for semi-transparent colors in CSS. While 8-digit HEX (#RRGGBBAA) is supported in CSS Color Level 4, rgba() remains more universally readable and supported across toolchains. Use it for overlays, shadows, and scrim layers.
Use RGB with Canvas API and WebGL: The HTML Canvas API (CanvasRenderingContext2D) and WebGL accept color values as normalized floats (0.0–1.0) derived from RGB integers. Chart libraries such as Chart.js and D3.js also accept RGB arrays or strings. Converting from HEX to RGB before passing values to these APIs avoids string parsing at runtime.
Use HEX in Figma, Sketch, and design handoff: Figma displays and exports colors primarily as HEX in its Inspect panel. Design-to-code handoff tools — Zeplin, Supernova, Tokens Studio — export HEX by default. When bridging design specs to CSS, HEX is the standard format that requires no further transformation for web use.
Readability and maintainability in large codebases: HEX values are shorter and easier to scan in stylesheets or token files. RGB is preferable in dynamic contexts — for example, when building theme generators or interpolating between two colors — because arithmetic on integer channels (0–255) is more intuitive than on hexadecimal strings.

How This Color Converter Works

This tool implements the standard HEX ↔ RGB conversion algorithms defined by the W3C CSS Color specification. All processing is deterministic — given the same input, the output is always identical.

HEX parsing via base-16 conversion: The input HEX string is stripped of its # prefix and split into three two-character substrings. Each is parsed as a base-16 integer using parseInt(str, 16), producing a decimal integer between 0 and 255 for each color channel.
Shorthand HEX expansion (#RGB → #RRGGBB): Three-character HEX codes are expanded by duplicating each digit — #F0A becomes #FF00AA — matching the algorithm specified in the W3C CSS Color Module Level 4. This ensures shorthand and full-form HEX produce identical results.
RGB normalization and channel clamping: For RGB → HEX, each channel value is clamped to the valid 0–255 range before processing. Each integer is then converted to its two-digit hexadecimal representation using Number.prototype.toString(16), with a leading zero appended if the result is a single character.
Lossless, deterministic conversion: Because both HEX and RGB represent integer channel values in the 0–255 range, conversion in either direction is exact — no floating-point approximation, no rounding. The round-trip #RRGGBB → rgb() → #RRGGBB always produces the original value.
Client-side execution — no server calls: All conversion logic runs entirely within the browser using vanilla JavaScript. No network request is made at any point. Color values entered into this tool are never transmitted to or stored on any server. The page functions fully offline once loaded.

Based on industry standards: W3C CSS Color Module Level 4 §4.1–§4.2 · sRGB standard IEC 61966-2-1 · MDN Web Docs: CSS color value

Frequently Asked Questions

What is a HEX color code?

A HEX color code is a six-character base-16 string prefixed with # that encodes the red, green, and blue color channels. Each two-character pair ranges from 00 (decimal 0) to FF (decimal 255), yielding 256 levels per channel and 16,777,216 total possible colors. For example, #FF0000 is pure red, #000000 is black, and #FFFFFF is white. Per the W3C CSS Color Module Level 4, HEX notation is formally equivalent to the rgb() function.

What is the RGB color format?

RGB (Red, Green, Blue) is the additive color model used by digital displays and CSS rendering engines. Each channel is an 8-bit integer ranging from 0 to 255 — the same range as a two-digit HEX pair. The CSS function rgb(255, 0, 0) and the HEX value #FF0000 are identical representations of pure red. Per the W3C CSS Color Module Level 4, both syntaxes are interpreted against the sRGB color space (IEC 61966-2-1) in all major browsers.

How do you convert a HEX code to RGB?

Split the six-character HEX string into three two-character pairs and parse each as a base-16 integer using parseInt(pair, 16). For example, #6366F1 splits into 63 (R=99), 66 (G=102), and F1 (B=241). For three-character shorthand HEX like #F0A, first expand each digit to produce #FF00AA, then apply the same parsing. The conversion is exact and lossless.

Why use HEX instead of RGB (or vice versa)?

HEX is the most compact format for static, opaque colors in CSS and is the default output of most design tools including Figma. RGB (specifically rgba()) is preferable when alpha transparency is needed, when working with the HTML Canvas API or WebGL, or when programmatically adjusting individual channels — since arithmetic on integers (0–255) is more intuitive than on hexadecimal strings. Both formats encode identical color information within the sRGB color space.

Is this tool safe to use with sensitive colors?

Yes. All conversion logic executes entirely within your browser using client-side JavaScript. No color data, input, or output is transmitted to any server or third-party service. The tool operates without cookies, analytics tracking of user inputs, or persistent storage. It functions fully offline after the initial page load.

Does this tool support shorthand HEX (#RGB)?

Yes. Three-character shorthand HEX codes like #F0A are automatically expanded to their full six-character form (#FF00AA) by duplicating each digit — following the expansion algorithm defined in the W3C CSS Color Module Level 4. This ensures consistent results regardless of whether a three-character or six-character HEX is provided as input.

Can I use the copied values directly in CSS?

Yes. The HEX output includes the # prefix and the RGB output uses the standard CSS rgb(R, G, B) functional notation as specified in the W3C CSS Color Module Level 4. Both can be pasted directly into any CSS property that accepts <color> values — including color, background-color, border-color, fill, and CSS custom properties. They are also compatible with Tailwind CSS arbitrary values and most charting libraries.

References & Standards

→
W3C CSS Color Module Level 4 — The authoritative specification for all color syntax supported in CSS, including HEX, RGB, HSL, and newer formats like oklch and lab. Defines the canonical HEX expansion and rgb() equivalence algorithms.
→
MDN: CSS color values — Comprehensive reference for all CSS color formats, syntax details, and browser compatibility data across Chrome, Firefox, Safari, and Edge.
→
MDN: HEX color notation — Reference for three-character (#RGB), six-character (#RRGGBB), and eight-character (#RRGGBBAA, with alpha) HEX formats.
→
MDN: CSS rgb() function — Specification and usage reference for the rgb() and rgba() functional notations, including the modern space-separated syntax introduced in CSS Color Level 4.
→
IEC 61966-2-1: sRGB standard — The international standard defining the sRGB color space, the default color space for the web. Specifies channel chromaticity, white point (D65), and gamma encoding used by CSS color values in all modern browsers. Published by the International Electrotechnical Commission.
→
MDN: HTML color input — Reference for the <input type="color"> element used in this tool's visual picker, including browser implementation notes and value format.

Published: April 25, 2026 · Last updated: April 25, 2026 · Last reviewed: April 2026 · Conversion logic follows the W3C CSS Color Module Level 4 specification and the sRGB standard (IEC 61966-2-1).