100 Web Safe HTML Colors with Name, Hex Code, RGB and HSL Value

ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More

Short answer: The historical web-safe palette contains 216 colors made from the hexadecimal channel levels 00, 33, 66, 99, CC, and FF. Modern browsers and displays are not generally restricted to those colors. For practical web design, CSS named colors and modern hexadecimal, RGB, and HSL notation are more useful.

#	Preview	Product	Price
1		Calibrite ColorChecker Classic Color Reference Target for Photo/Video Color Accuracy, 24 Patch Chart...	$74.25	Buy on Amazon
2		DGK Color Tools Digital Kolor Pro 16:9 Large Color Calibration and Video Chip Chart, 2-Pack	$14.99	Buy on Amazon
3		HTML, XHTML, and CSS, Sixth Edition	$11.82	Buy on Amazon

Web-safe colors versus CSS named colors

The term HTML colors is largely legacy terminology. Color values are now primarily written in CSS, although they can appear in inline HTML styles. CSS supports named keywords, six-digit hexadecimal values, rgb(), hsl(), and other color functions. CSS color keywords resolve to colors in the sRGB color space.

The original web-safe idea came from older computers and displays that used limited, inconsistent palettes. Designers chose six evenly spaced hexadecimal levels for each red, green, and blue channel:

#1 Best Overall

Sale

Calibrite ColorChecker Classic Color Reference Target for Photo/Video Color Accuracy, 24 Patch Chart for White Balance and Color Grading, 8 x 11.5 inch Profile Creation and Editing Workflow Tool (CCC)

• SPECIFICATIONS: 24 patch color reference target designed for photo and video workflows, supports white balance, exposure evaluation, and color grading, 8 x 11.5 inch chart size, engineered for consistent color reproduction under varied lighting, ideal for Camera profiling and calibration use.
• ACCURATE COLOR CONTROL: 24 scientifically formulated color patches provide a consistent reference for correcting color casts and maintaining true to life results, helping photographers and filmmakers achieve dependable accuracy across different lighting conditions and camera systems.
• WHITE BALANCE REFERENCE: Capture the target under the same light as your subject to set neutral balance and exposure with confidence, reducing trial and error corrections and improving consistency across a full shoot or production day.
• PROFILE CREATION READY: Supports creation of custom DNG and ICC camera profiles when used with Calibrite PROFILER software, helping streamline editing workflows and maintain predictable color rendering for specific camera, lens, and lighting combinations.
• WORKFLOW EFFICIENCY: Provides a reliable point of reference for global corrections and color grading decisions, saving time in post production while improving consistency for multi camera shoots, commercial work, and color critical deliverables.

$74.25

Buy on Amazon

00, 33, 66, 99, CC, FF

There are 6 × 6 × 6 = 216 possible combinations. A color is marked Yes in the table only when all three RGB channels use one of those six levels. Many familiar CSS names—including tomato, cornflowerblue, and rebeccapurple—are not strict web-safe colors.

How to read the color values

• Hex: A six-digit sRGB value in the form #RRGGBB. Each pair represents red, green, or blue from 00 to FF.
• RGB: The same color expressed as three decimal channel values from 0 to 255.
• HSL: The same sRGB color expressed as hue, saturation, and lightness. Hue is measured in degrees from 0 to 360; saturation and lightness are percentages.

The HSL values below are calculated from the RGB values and rounded to the nearest whole degree or percentage. Because of that rounding, hex or integer RGB is the best copy-and-paste choice when exact color reproduction matters.

100 CSS colors with hex, RGB, HSL, and web-safe status

How to use these colors in CSS

A named color is the shortest option when the keyword is clear and supported by the CSS standard:

.card {
  background-color: tomato;
}

The equivalent sRGB hexadecimal and RGB declarations are:

.card {
  background-color: #ff6347;
  background-color: rgb(255 99 71);
}

Using HSL can make it easier to reason about hue, saturation, and lightness:

.card {
  background-color: hsl(9 100% 64%);
}

These examples describe the same intended color. For production code, use one final declaration rather than stacking equivalent values unless you are deliberately providing a fallback. Hex and integer RGB preserve the table’s values exactly; rounded HSL may differ by a small amount when converted back.

CSS color names and aliases

CSS color keywords are ASCII case-insensitive, so Tomato and tomato are interpreted the same way. Lowercase is preferable in documentation and source code for consistency.

Rank #2

DGK Color Tools Digital Kolor Pro 16:9 Large Color Calibration and Video Chip Chart, 2-Pack

• SUPERIOR ACCURACY - Ensures precise color calibration with professional-grade chips, delivering consistent and reliable results for video production.
• ENHANCED IMAGE QUALITY - Optimizes video quality using 16:9 aspect ratio charts, allowing for detailed adjustments and accurate color reproduction.
• INCREASED DURABILITY - Constructed with robust materials, the Digital Kolor Pro charts are designed for long-term use, resisting wear and tear in demanding environments.
• WIDE COMPATIBILITY - Versatile calibration tool compatible with various cameras and editing software, making it an essential asset for diverse video workflows.
• SIMPLE AND EASY TO USE - Streamlines the color correction process with intuitive chart layouts, enabling quick and efficient calibration for both beginners and experts.

$14.99

Buy on Amazon

Some keywords are aliases and therefore resolve to exactly the same sRGB value:

• aqua and cyan are identical.
• fuchsia and magenta are identical.
• gray and grey are identical.
• darkgray and darkgrey are identical.
• lightgray and lightgrey are identical.
• dimgray and dimgrey are identical.
• darkslategray and darkslategrey are identical.
• lightslategray and lightslategrey are identical.

Do not assume that a name is a precise description of how people perceive the color. CSS keywords are a convenient historical vocabulary, not an evenly spaced or perceptually uniform color system.

Are web-safe colors still necessary?

Usually, no. A modern responsive website does not need to limit its palette to the historical 216 colors for ordinary browser compatibility. Current browsers and display hardware support 24-bit sRGB color and far more than 216 displayable colors.

The strict palette can still be useful when you are maintaining a legacy interface, matching an old design specification, teaching the history of web design, or deliberately choosing from a small, predictable palette. If you use it for a current project, treat it as a design constraint—not a browser requirement.

Accessibility: test combinations, not color names

A color reference table cannot tell you whether a text and background pairing is accessible. Contrast depends on the actual foreground and background colors, text size, weight, and the applicable accessibility requirements. Pale colors may disappear on white, while saturated colors can be difficult for some readers to distinguish.

Check every important text/background combination with a current contrast-testing tool. Also make sure that meaning is not conveyed by color alone: add labels, icons, patterns, or text where necessary. Consider color-vision deficiencies when designing charts, buttons, status indicators, and painting or art portfolios.

For a desk-side supplement to an online lookup table, readers who work away from their screen may prefer an HTML and CSS reference chart. Verify the current edition and availability before purchasing; printed colors can also vary with paper, ink, lighting, and viewing conditions, so a physical chart should not be treated as an exact substitute for a calibrated display.

How HSL values are calculated

Each RGB channel is first divided by 255 to produce a value between 0 and 1. Let max be the largest channel, min the smallest, and delta = max - min.

Rank #3

Sale

HTML, XHTML, and CSS, Sixth Edition

$11.82

Buy on Amazon

• lightness = (max + min) / 2
• If delta is zero, saturation is zero and hue is conventionally zero.
• Otherwise, saturation is calculated from delta / (1 - |2L - 1|).
• Hue is determined by the channel with the maximum value, converted to degrees, and normalized to 0–360.

The table rounds hue to a whole degree and saturation and lightness to whole percentages. Different software may show decimal values, so small differences between this reference and a color-picker interface are normal.

Frequently Asked Questions

Are web-safe colors required for modern websites?

No. The historical 216-color palette was designed for older limited-palette displays. Modern browsers and displays generally support 24-bit sRGB color, so current sites can use the full CSS color system.

Are HTML color names and CSS color names the same?

The terminology overlaps, but CSS is the modern standard for specifying web colors. The named keywords are CSS color keywords and can be used in stylesheets or inline HTML styles.

How do I know whether a color is strictly web-safe?

Convert the color to six-digit RGB hexadecimal and check every channel. All three channels must be one of 00, 33, 66, 99, CC, or FF. If even one channel uses another value, it is not in the historical 216-color palette.

Is HSL more accurate than RGB?

No. HSL and RGB are different representations of the same sRGB color. HSL can be convenient for adjusting hue, saturation, and lightness, while hexadecimal or integer RGB is preferable when exact copy-and-paste reproduction matters.

The Bottom Line

Use the table for practical CSS color lookup, but keep the terminology straight: the historical “web-safe” set has 216 members, while CSS named colors are a broader standardized vocabulary. For modern work, choose the color that suits the design, verify contrast, and use the hex or RGB value when exact reproduction is important.

Quick Recap

SaleBestseller No. 1

Calibrite ColorChecker Classic Color Reference Target for Photo/Video Color Accuracy, 24 Patch Chart for White Balance and Color Grading, 8 x 11.5 inch Profile Creation and Editing Workflow Tool (CCC)

$74.25

Bestseller No. 2

DGK Color Tools Digital Kolor Pro 16:9 Large Color Calibration and Video Chip Chart, 2-Pack

No further features available.; No further features available.; No further features available.

$14.99

SaleBestseller No. 3

HTML, XHTML, and CSS, Sixth Edition

$11.82

ThatPainter Team