CSS Color Codes

• CSS Reference
• CSS Color Tools

Use the following color picker or color charts to pick a color that you can use within your CSS code. The color picker provides color values in formats such as hexadecimal, RGB, and HSL. The color charts provide them in hexadecimal, RGB, and their color names.

Color Picker

Basic CSS Colors

Here is a table of the basic color names that have been in CSS since CSS1 (except orange, which was added in CSS 2.1).

Try clicking on a value. This will open the color in Quackit's online editor so you can see how it looks (and grab the code). There's also a link to a color tester where you can get another preview of the color.

CSS Color Names

Here is a full list of the CSS named colors as specified in CSS3 (CSS Color Module Level 4). These are based on the X11 color set. The above basic colors are also included in this chart.

Try clicking on a value. This will open the color in Quackit's online editor so you can see how it looks (and grab the code). There's also a link to a color tester where you can get another preview of the color.

More Color Charts

How to use these Colors

Each color can be represented in many different ways. For example, blue can also be represented as #0000ff (6-digit hex), #00f (3-digit hex), rgb(0 0 255) (RGB functional notation), hsl(240 100% 50%) (HSL), or modern formats like oklch(0.45 0.31 264). It doesn't matter which one you choose as long as it's a valid color.

You can apply any of these colors to a website or blog by using the relevant CSS code.

• To set a background color, use background-color
• To set the text color, use color
• To set a border color, use border-color

Take blue for example.

Below are quick CSS code examples for applying this color to various HTML elements.

Check out some basic color code examples using color names in the online editor.

In Hexadecimal Notation

Here is the same color, but this time using hexadecimal notation instead of the color name.

So the color code is now 0000ff.

This needs to be prefixed with a hash symbol, so it will become #0000ff when written in the code.

Check out some basic color code examples using hexadecimal values in the online editor.

CSS supports several variations of hexadecimal notation:

• 6-Digit Hex Codes: The standard format representing red, green, and blue (e.g. #0000ff).
• 3-Digit Hex Codes: Shorthand syntax where each digit is doubled (e.g. #00f expands to #0000ff).
• 8-Digit Hex Codes: Adds two digits for the alpha channel to specify transparency (e.g. #0000ff80 for 50% opacity).
• 4-Digit Hex Codes: Shorthand version of 8-digit hex (e.g. #00f8 expands to #0000ff88).

In RGB Functional Notation

You can also define colors using the rgb() functional notation.

In modern CSS specifications (CSS Color Module Level 4 and later), the recommended syntax uses space-separated numbers or percentages, with an optional forward slash to specify an alpha channel for transparency. Early versions of CSS require comma-separated values and don't support the slash notation for alpha:

Check out some basic color code examples using RGB functional notation in the online editor.

In HSL Functional Notation

The hsl() function allows developers to specify colors by their hue, saturation, and lightness. HSL, which stands for Hue, Saturation, Lightness, is often a more intuitive way for specifying and tweaking colors than RGB.

The first value represents the hue as an angle on the color circle (from 0 to 360, or with units such as deg or turn, where 0 is red, 120 is green, and 240 is blue). The second value is saturation (0% is gray, 100% is full color). The third value is lightness (0% is black, 100% is white, and 50% is normal brightness).

Check out some basic color code examples using HSL functional notation in the online editor.

Full-Page Example

Here is an example of where CSS color codes can fit into an HTML document.

This example uses embedded style sheets. You can also move the styles to an external style sheet so that you can apply the styles across the whole site from one file.

Transparent Colors

CSS enables you to apply transparent colors to HTML elements so that underlying background elements show through.

In modern CSS, transparency (an alpha channel) can be added to any color notation:

• Slash syntax in functional notations: Add a forward slash followed by the opacity value between 0 (fully transparent) and 1 (fully opaque), or as a percentage (0% to 100%). For example, rgb(30 255 50 / 0.5) or hsl(125 100% 56% / 50%).
• Hexadecimal with alpha: Use 8-digit hex codes (e.g. #1eff3280) or 4-digit hex codes (e.g. #1f38).
• The transparent keyword: To make an element completely transparent, use the transparent keyword.
• Legacy rgba() and hsla(): Earlier CSS specifications required separate rgba() and hsla() functions (e.g. rgba(30, 255, 50, 0.5)). In current CSS specifications, these are legacy aliases because rgb() and hsl() accept alpha values directly.

Here is an example demonstrating a semi-transparent background color:

Modern Color Spaces: OKLCH & Wide Gamut

In modern CSS (CSS Color Module Level 4), new color functions were introduced that go beyond the limitations of sRGB, RGB, and HSL. The most prominent of these is oklch().

OKLCH

The oklch() function defines colors using Lightness, Chroma, and Hue in the Oklab color space:

• Lightness (L): From 0% (black) to 100% (white), or as a number between 0 and 1.
• Chroma (C): The saturation or purity of the color, ranging from 0 (gray) up to around 0.4 (maximum saturation).
• Hue (H): The color angle from 0 to 360 (or with units such as deg or turn).

A key advantage of OKLCH over HSL is perceptual uniformity. In HSL, pure yellow and pure blue have the same mathematical lightness (50%), but yellow appears far brighter to the human eye. In OKLCH, two colors with the same lightness value look equally bright to human perception, making it much easier to build accessible, balanced palettes and design tokens.

You can test and generate OKLCH values using Quackit's OKLCH Color Picker.

Wide Gamut & the color() Function

Modern screens (such as Retina displays and OLED monitors) can display a wider range of colors than standard sRGB monitors. The color() function allows you to specify colors in wide-gamut color spaces such as Display P3 (e.g. color(display-p3 0.1 0.7 0.9)).

Modern Color Functions: Mixing, Deriving, & Themes

CSS Color Module Level 5 and related specifications introduce powerful color manipulation functions that are supported across all modern browsers:

1. Blending Colors with color-mix()

The color-mix() function mixes two colors together in a specified color space. This is commonly used to generate hover/active states or tinted overlays without needing to hardcode new hex values:

2. Relative Color Syntax (RCS)

Relative Color Syntax allows you to take an existing color (such as a CSS variable) and modify specific channels (such as adjusting opacity or lightening the color) using the from keyword:

3. Adaptive Colors with light-dark()

The light-dark() function provides two colors and automatically chooses between them based on the element's color-scheme property (such as when the user's operating system switches between Light Mode and Dark Mode):

List of Color Values

Here's a list of color values you can use with CSS:

• CSS Named Colors
• CSS transparent Keyword
• CSS currentcolor Keyword
• CSS System Colors
• CSS 3-Digit Hex Codes
• CSS 4-Digit Hex Codes
• CSS 6-Digit Hex Codes
• CSS 8-Digit Hex Codes
• CSS rgb() Function
• CSS rgba() Function
• CSS hsl() Function
• CSS hsla() Function
• CSS hwb() Function
• CSS lab() Function
• CSS lch() Function
• CSS oklab() Function
• CSS oklch() Function
• CSS color() Function
• CSS color-mix() Function
• CSS light-dark() Function

List of Color Properties

Here's a list of color-related properties you can use with CSS:

• accent-color
• background-color
• background
• border
• border-bottom-color
• border-color
• border-left-color
• border-right-color
• border-top-color
• box-shadow
• caret-color
• color
• color-scheme
• column-rule
• column-rule-color
• filter
• forced-color-adjust
• opacity
• outline-color
• outline
• print-color-adjust
• scrollbar-color
• text-decoration
• text-decoration-color
• text-emphasis-color
• text-shadow

Web Safe Colors

Historically, "web safe colors" referred to a palette of 216 colors that were guaranteed to display consistently without dithering in the 1990s, when computer monitors were limited to 8-bit color (256 colors).

With modern displays capable of rendering millions (or billions) of colors, web safe colors are no longer a technical requirement in web development. However, if you are curious about the historical palette or need a quick set of retro colors, check out the full Web Safe Color Chart.

• CSS Reference
• CSS Color Tools