Tomato Color (#FF6347)

#FF6347rgb(255, 99, 71)

Tomato is a CSS named color defined as hex code #FF6347. Tomato is a bright red-orange: full red with moderate green and blue. It is warmer and more orange than pure red, and feels energetic rather than alarming.

Color Overview & Formats

CSS: tomatoLuminance: 0.3064
HEX
#FF6347
RGB
rgb(255, 99, 71)
HSL
hsl(9, 100%, 64%)
Tomato (#FF6347) Color Format Conversions
FormatSyntax / ValuesNotesAction
HEX#FF63476-digit hex web code
RGBrgb(255, 99, 71)Red, Green, Blue channels (0-255)
HSLhsl(9, 100%, 64%)Hue (9°), Saturation (100%), Lightness (64%)
HSV / HSBhsv(9, 72%, 100%)Hue, Saturation (72%), Value/Brightness (100%)
CMYKcmyk(0%, 61%, 72%, 0%)Digital mathematical approximation (non-print)
OKLCHoklch(0.696 0.196 32.3)Perceptually uniform color space (CSS Color 4 approximation)
CSS Implementation & Quick Steps
background-color: #FF6347; /* or tomato */
  1. Select color format: Choose the desired format (HEX #FF6347, RGB, or HSL).
  2. Copy the code: Click the copy button or press Tab+Enter to store in clipboard.
  3. Pair with black text: Black text on Tomato reaches 7.13:1 (WCAG AAA).

What Colors Go With Tomato?

These 6 colors all go well with Tomato (#FF6347), and each one is a standard CSS named color. The ratio is the WCAG 2.2 contrast of that color on Tomato: at 4.5:1 or above it works for text; below that, use it for backgrounds and accents.

Black

#000000
7.13:1Text-safe

Strong, readable text on tomato.

Navy

#000080
5.43:1Text-safe

A deep blue that gives readable text and a fresh contrast.

3.03:1Background / accent

A muted charcoal-green for a grounded, modern look.

Forest Green

#228B22
1.49:1Background / accent

A natural complement, as in produce and garden themes.

Olive

#808000
1.42:1Background / accent

An earthy green-brown for rustic, farm-to-table palettes.

Ivory

#FFFFF0
2.92:1Background / accent

A warm off-white for backgrounds around tomato accents.

Harmonious Palettes & Tints

The palettes below are algorithmically generated across standard intervals based on Tomato (HSL 9°). Each group offers full palette copy and live preview:

Complementary Harmony

Hue rotated 180 degrees on the HSL wheel (9° to 189°), keeping the original saturation and lightness.

Tomato
#FF6347
Complement (189°)
#47E3FF
Live UI Component Mockup
Component Header SampleBlack text on Tomato: 7.13:1 (WCAG AAA).
Button style preview

Analogous Harmony

Hues 30 degrees either side (339° and 39°), keeping the original saturation and lightness.

Analogous (339°)
#FF4787
Tomato
#FF6347
Analogous (39°)
#FFBF47
Live UI Component Mockup
Component Header SampleBlack text on Tomato: 7.13:1 (WCAG AAA).
Button style preview

Triadic Harmony

Hues spaced evenly by 120 degrees (129° and 249°), keeping the original saturation and lightness.

Tomato
#FF6347
Triadic (129°)
#47FF63
Triadic (249°)
#6347FF
Live UI Component Mockup
Component Header SampleBlack text on Tomato: 7.13:1 (WCAG AAA).
Button style preview

Tints & Shades

Mixed with white (tints) and black (shades) in sRGB at 60% and 30%.

Tint 60%
#FFC1B5
Tint 30%
#FF927E
Tomato
#FF6347
Shade 30%
#B34532
Shade 60%
#66281C
Live UI Component Mockup
Component Header SampleBlack text on Tomato: 7.13:1 (WCAG AAA).
Button style preview

WCAG 2.2 Text Readability & Contrast Check

Under WCAG 2.2 criteria, regular body text requires at least 4.5:1 (AA) and large text requires at least 3.0:1. The table below displays calculated contrast ratios:

Text Contrast Ratios on Tomato (#FF6347)
Foreground ColorContrast RatioNormal Text (AA)Large Text (AA)Normal Text AAA (>= 7.0:1)
Pure Black (#000000)
7.13:1PassPassPass
Pure White (#FFFFFF)
2.95:1FailFailFail
Dark Charcoal (#212529)
5.24:1PassPassFail
Mid Gray (#666666)
1.95:1FailFailFail

Interactive Contrast Tester

Enter text foreground and background colors to verify WCAG legibility:

Calculated Ratio:
7.13:1
Normal: Pass AAALarge: Pass AAA
Large Heading Sample (18pt Bold)

This is sample body text rendered directly to verify contrast and readability.

Tomato Background Download

Download standard 1920x1080 solid desktop wallpaper or generate mobile wallpaper:

Tomato 1920x1080 solid color background wallpaper previewStandard Wallpaper: 1920x1080 PNG (#FF6347)

Download Options

All wallpaper files precisely match the W3C standard color value:

Download 1920x1080 PNG

CSS Standard & Usage Notes

tomato = #ff6347 (rgb(255, 99, 71))
W3C CSS Color 4

UI Design & Accessibility Guidelines

Use it for calls to action, food and restaurant branding, and warm accents. On Tomato, black text passes WCAG AAA at every size (7.13:1); white text fails even for large text (2.95:1).

Published: · Modified: · Editorial: SwatchAtlas Editorial Team

Frequently Asked Questions (FAQ)

Can I use black text on Tomato?

Yes. Black text on Tomato has a WCAG 2.2 contrast ratio of 7.13:1, passing both AA (4.5:1) and AAA (7:1) at every text size.

Can I use white text on Tomato?

No. White text on Tomato has a WCAG 2.2 contrast ratio of only 2.95:1, below the 3:1 minimum even for large text.

What colors go with Tomato?

Black, Navy, Dark Slate Gray, Forest Green, Olive and Ivory all go well with Tomato. Black (7.13:1) and Navy (5.43:1) have enough contrast for text on Tomato; Dark Slate Gray, Forest Green, Olive and Ivory work better as a background or accent.

What is the difference between tomato and coral?

Tomato (#FF6347, hue 9°) is redder and slightly darker. Coral (#FF7F50, hue 16°) is lighter and leans more toward orange.