Color guide · Red colors
Red Color
Pure CSS red uses the maximum red channel with no green or blue. That makes it useful for a clear accent, but saturation is not the same as readable contrast. Decide what red means in your layout before repeating it across unrelated elements.
Red color codes
#FF0000rgb(255, 0, 0)hsl(0, 100%, 50%)redRGB values use the 0–255 scale. HSL values are rounded to one decimal place for display. CSS Color: named colors ↗
The name & the reference
What makes red interesting?
The CSS keyword red is exactly #FF0000. In living plants, some red tones come from anthocyanin pigments; the Smithsonian discusses their role in strawberries and autumn leaves. An RGB primary on a display and a pigment in a fruit are different ways of producing a visual red.
Read the reference: Smithsonian: what makes things blue ↗
Things with red tones
These illustrated references explore a color family. Objects vary; none is a claim of an exact #FF0000 match.
Strawberry-inspired color
The ripe surface has highlights, seeds and shadows rather than one uniform red.
Autumn leaves
Some leaves develop red pigments as their seasonal chemistry changes.
Red fabric
A strong textile accent can remain visible even when the rest of a composition is subdued.
Ideas for using red
Interfaces
Keep error red separate from promotional red. Add a message or icon to explain each state.
Games
Use a red accessory to distinguish a character, while keeping health warnings visually separate.
Posters
Try a small red area against ivory and charcoal. Let the larger neutral areas do most of the reading work.
Watch out: White on pure red falls below the normal-text AA threshold. Measure the label instead of assuming a familiar red button is readable.
Tints, shades & companion hues
These tints and shades are simple sRGB channel mixes with white or black. They are useful starting points, not perceptually equal steps or guaranteed accessible pairs. Select a swatch to copy its hex code.
Hue companions
Calculated in HSL with the same saturation and lightness. Complementary and analogous colors suggest hue relationships; they do not promise contrast.
Palettes featuring red
See the palette at work
Palette preview studio
Try a website, a game scene, a poster or a room. Pick a role, then select a swatch to repaint it. These are schematic design previews, not rendered materials or a game engine.
Text is automatically chosen as black or white for opaque preview surfaces. This does not certify your exported palette for every use.
Make something worth exploring.
A clear reading surface, one useful accent and room for the details.
Explore the collection →COLOR
IN MOTION
Make room for a new perspective.
Explore. Experiment. Create.Try it in context
Live design & contrast preview
Change the surface and text independently. The text result uses opaque sRGB colors; it does not evaluate your entire page.
5.25:1 · AA normal text
AA normal text needs 4.5:1; AA large text needs 3:1. Large text means at least 18 pt, or 14 pt bold. Ratios are assessed before rounding. This is a text check, not a complete accessibility audit. W3C: understanding text contrast ↗
Your next good idea
Try a readable heading, a short paragraph and a clear action on this surface.
Example action →Static design sample · use the controls to change itCompare red with another color →
Questions about red
Can red communicate an error on its own?
No. Pair the color with a message, symbol or other visible cue.
Will this look the same in print?
No exact print match is promised. Paper, ink, color profiles and lighting affect the result. Use a physical proof when a precise material match matters.
Can I use these codes in a website or game?
Yes. Copy the exact code, give it a clear role in your palette and test text contrast. Add labels or shapes when color communicates important information.
Keep exploring
A color name is a starting point
Digital codes describe sRGB colors. Natural objects, paint, ink and screens can look different under different lighting or calibration. Visual references illustrate color families rather than exact measured matches. Placeholder illustrations are clearly labeled. Design ideas are suggestions, not universal claims about emotion or culture.
Pick colors from an image · Convert a color · Check a complete text pair · Suggest a color guide