What color formats are supported?

The tool accepts six-digit or shorthand HEX values and displays matching RGB and modern CSS rgb() values. Values update as you choose or edit a color.

HEX uses three or six hexadecimal digits. Each pair in a six-digit value represents red, green, or blue intensity from 00 to FF.

RGB represents red, green, and blue channels. Each channel ranges from 0 to 255, and the three values combine to describe a screen color.

Which CSS format should I use?

The CSS rgb() function can use comma-separated channels such as rgb(99, 102, 241) or the modern space-separated form rgb(99 102 241). Both describe the same opaque color.

No. The picker and conversion run in your browser, so no color value is sent to a server.

Each shorthand digit is doubled, so #fff expands to #ffffff. Red, green, and blue are all at maximum intensity.

Why does RGB use values from 0 to 255?

Each RGB channel is stored as an eight-bit value. 0 means none of that channel, while 255 means full intensity.

Developer Tools

Color Picker & Converter

Pick any color and convert between HEX, RGB, HSL, and CMYK. Check WCAG contrast ratios and explore shades and tints — all in your browser.

HEX / RGB / HSL / CMYK
WCAG Contrast
Shades & Tints
Browser-only

Color

HEX

#6366F1

RGB

rgb(99, 102, 241)

CSS

rgb(99 102 241)

Color picker and HEX to RGB converter

Choose a color with the native picker or enter a HEX value. Results update immediately and remain in your browser.

Supported formats

Format	Example	Use
HEX	`#6366f1`	Compact notation for a screen color
RGB	`rgb(99, 102, 241)`	Explicit red, green, and blue channels
CSS rgb	`rgb(99 102 241)`	Modern CSS function syntax

HEX values use three or six hexadecimal digits. Six-digit values contain one pair for each channel: red, green, and blue. Channel values range from 00 to FF, which corresponds to 0 through 255 in RGB.

CSS examples

:root {
  --brand: #6366f1;
  --brand-rgb: rgb(99 102 241);
}

button {
  color: white;
  background: var(--brand);
}

const hex = "#6366f1";
const rgb = "rgb(99 102 241)";
document.documentElement.style.setProperty("--brand", hex);

hex_color = "#6366f1"
red, green, blue = 99, 102, 241

HEX versus RGB

HEX is convenient in stylesheets and design tokens because it is short and portable. RGB is useful when code needs to manipulate individual channels, blend colors, or add transparency with rgba() or the CSS rgb() alpha component.

The comma-separated and space-separated CSS forms represent the same opaque color:

color: rgb(99, 102, 241);
color: rgb(99 102 241);

Common uses

Check a design token before adding it to a stylesheet.
Convert a HEX value copied from a design tool to CSS channels.
Inspect channel values while debugging a theme or component.
Confirm shorthand values such as #fff before using them.

Frequently Asked Questions

What color formats are supported?: The tool accepts six-digit or shorthand HEX values and displays matching RGB and modern CSS rgb() values. Values update as you choose or edit a color.
What is a HEX color?: HEX uses three or six hexadecimal digits. Each pair in a six-digit value represents red, green, or blue intensity from 00 to FF.
What is RGB?: RGB represents red, green, and blue channels. Each channel ranges from 0 to 255, and the three values combine to describe a screen color.
Which CSS format should I use?: The CSS rgb() function can use comma-separated channels such as rgb(99, 102, 241) or the modern space-separated form rgb(99 102 241). Both describe the same opaque color.
Are colors uploaded?: No. The picker and conversion run in your browser, so no color value is sent to a server.
What does #fff mean?: Each shorthand digit is doubled, so #fff expands to #ffffff. Red, green, and blue are all at maximum intensity.
Why does RGB use values from 0 to 255?: Each RGB channel is stored as an eight-bit value. 0 means none of that channel, while 255 means full intensity.

Disclaimer

This tool is provided for general informational and utility purposes only. Results may be inaccurate, incomplete, outdated, or contain errors. Always verify results before relying on or using them.

Some tools may use AI, automated processing, third-party services, or server-side processing. Do not rely on these tools as a substitute for professional advice.

Use at your own risk. BestToolOnline makes no guarantees regarding the accuracy, reliability, completeness, availability, or suitability of results, to the maximum extent permitted by applicable law.

See our Terms of Service and Privacy Policy for complete details.

Loading tool...

Color picker and HEX to RGB converter

Choose a color with the native picker or enter a HEX value. Results update immediately and remain in your browser.

Supported formats

Format	Example	Use
HEX	`#6366f1`	Compact notation for a screen color
RGB	`rgb(99, 102, 241)`	Explicit red, green, and blue channels
CSS rgb	`rgb(99 102 241)`	Modern CSS function syntax

CSS examples

:root {
  --brand: #6366f1;
  --brand-rgb: rgb(99 102 241);
}

button {
  color: white;
  background: var(--brand);
}

const hex = "#6366f1";
const rgb = "rgb(99 102 241)";
document.documentElement.style.setProperty("--brand", hex);

hex_color = "#6366f1"
red, green, blue = 99, 102, 241

HEX versus RGB

The comma-separated and space-separated CSS forms represent the same opaque color:

color: rgb(99, 102, 241);
color: rgb(99 102 241);

Common uses

Check a design token before adding it to a stylesheet.
Convert a HEX value copied from a design tool to CSS channels.
Inspect channel values while debugging a theme or component.
Confirm shorthand values such as #fff before using them.