Red palettes and pairings
HEX
#FF0000
RGB
255, 0, 0
HSL
0°, 100%, 50%
HSV
0°, 100%, 100%
Pure red (#FF0000) is the most intense warm color, commanding immediate attention. In business materials, use it sparingly for emphasis — a red accent on key metrics or CTAs creates urgency without overwhelming the layout.
Best for
Sales decks and pitch presentations where you need to convey confidence and urgency.
Accessibility
Check contrast before using red for text-heavy layouts, especially on low-contrast backgrounds.
How does red compare to nearby colors?
What is the difference between red and cherry?
Red (#FF0000) feels more signal-like on screen, while Cherry (#DE3163) pushes the family in the opposite direction. Red is more useful when the color itself needs to do some signaling; Cherry is easier to keep in longer-running surfaces. Use red when you want more pigment and immediate screen energy, and cherry when the same family should feel calmer or more spreadable.
What color is red?
Red is the first color humans named after black and white in virtually every language. It is the color of stop signs, fire trucks, and warning labels worldwide, making it the most universally recognized signal color in design.
What is the hex code for red?
| Format | Value |
|---|---|
| HEX | #FF0000 |
| RGB | rgb(255, 0, 0) |
| HSL | hsl(0°, 100%, 50%) |
| HSV / HSB | hsv(0°, 100%, 100%) |
| CMYK (approx.) | cmyk(0%, 100%, 100%, 0%) |
Convert Red to other color formats
Open the color converter with Red (#FF0000) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Red in the color converter →What does red mean in design?
Pure red commands immediate attention — it is the most universally recognized signal color in design, used for urgency, importance, and emotional intensity. In branding, red conveys confidence and energy, but its power is best controlled through restraint: a red accent on a neutral slide is compelling, while an all-red layout is overwhelming.
How do I use red in code?
| CSS (hex) | color: #FF0000; |
| CSS (rgb) | color: rgb(255, 0, 0); |
| CSS (hsl) | color: hsl(0, 100%, 50%); |
| RGB % | rgb(100%, 0%, 0%) |
| Tailwind | text-[#FF0000] |
| SwiftUI | Color(red: 1.000, green: 0.000, blue: 0.000) |
| UIKit | UIColor(red: 1.000, green: 0.000, blue: 0.000, alpha: 1.0) |
| Android | Color.rgb(255, 0, 0) |
| Compose | Color(0xFFFF0000) |
| Web Safe | #FF0000 |
Is red accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 4:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| AaBlack text on this color | 5.25:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| AaThis color as text on white | 4:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| AaThis color as text on black | 5.25:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.
How does red look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with red
Beside red, navy blue supplies structure that keeps the palette from drifting into event-poster or promotional red territory.
With a bright color like red, white acts like clean paper around the swatch and prevents the palette from feeling packed too tightly.
Charcoal gives red a darker, quieter partner, which helps vivid accents look deliberate instead of loud for their own sake.
What colors clash with red
Orange pushes red toward packaging or sale-sign energy more quickly than many brands or editorial systems want.
Neon Green competes with red so aggressively that the palette never really settles into a clear primary-secondary relationship.
How should I use red in design?
- •Use red for key metrics, warnings, or CTAs — never as a background color in professional slides.
- •Pair red with navy or charcoal for authority. Red + white + gray is a safe corporate palette.
- •Avoid red body text — it strains eyes on both light and dark backgrounds.
What are good red palettes?
Bold corporate
Sales decks and pitch presentations where you need to convey confidence and urgency.
Executive power
Annual reports and executive summaries for established brands.
Design with red in Moda
Create a presentation or document using red as your accent color. Moda's AI applies your color palette automatically.
Create a design with red →What are the shades and tints of red?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for red?
Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.
Similar colors
Crimson
Crimson is nearly adjacent to red in hue; what separates them is intensity, with crimson reading dustier and easier to extend across a layout.
Scarlet
Scarlet sits close to red in hue, but its red-hot cast changes the mood of the palette even when the contrast shift is small.
Cherry
Cherry is nearly adjacent to red in hue; what separates them is intensity, with cherry reading dustier and easier to extend across a layout.
Vermillion
Vermillion is nearly adjacent to red in hue; what separates them is intensity, with vermillion reading dustier and easier to extend across a layout.
Frequently asked questions
What is the hex code for red?
The hex code for red is #FF0000. In RGB, that's 255 red, 0 green, and 0 blue. The approximate CMYK equivalent is 0% cyan, 100% magenta, 100% yellow, and 0% key (black).
Is red a warm or cool color?
Red reads as warm. It feels most natural with creams, golds, rusts, and other warm accents, while cooler partners like navy or teal create sharper contrast.
Is red better as an accent or a full-palette color?
Red is usually best when it leads in short bursts rather than covering everything. It can headline a palette, but most layouts work better when the color handles accents, highlights, or one main hero role instead of every surface.
How should I use red in a design?
Red is vivid enough to work best in controlled doses such as CTAs, highlighted metrics, chart accents, or a single hero element. Surround it with quieter neutrals so it does not exhaust the layout.
Can I use red for text or backgrounds?
Red works better with dark text than white text. Black text reaches 5.25:1 contrast on the swatch, which makes the color more usable as a background or highlight surface than as a dark panel.
More red colors
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Red colors
Compare red with other red tones.
Brown colors
Explore nearby color families to build stronger palettes and contrasts.
Neutral colors
Explore nearby color families to build stronger palettes and contrasts.
Orange colors
Explore nearby color families to build stronger palettes and contrasts.
Last updated April 6, 2026
Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.