About Tomato
Tomato (tomato) is a light, vivid red with the hex code #ff6347, or rgb(255, 99, 71). In HSL it sits at a hue of 9°, 100% saturation and 64% lightness. It is one of the 148 named colors every browser understands, so you can write color: tomato; instead of the hex value.
Using Tomato for text and backgrounds
| Pairing | Contrast ratio | WCAG |
|---|---|---|
| Tomato text on white | 2.95 : 1 | fails |
| Tomato text on black | 7.13 : 1 | AAA |
On a tomato background, use black text (7.13 : 1). WCAG asks for at least 4.5 : 1 for body text and 3 : 1 for large text. Check other pairs with the Contrast Checker.
CSS
.element {
color: tomato; /* or #ff6347 */
background-color: #ff6347;
border: 1px solid rgb(255 99 71 / 50%);
}Similar named colors
Coral (#ff7f50), Salmon (#fa8072), Indian Red (#cd5c5c), Peru (#cd853f), Chocolate (#d2691e), Light Coral (#f08080).
Color Name FinderPaste a HEX code to get its closest human-readable name and clean token names for your CSS, SCSS, JavaScript or Tailwind config.
Open the tool Frequently asked questions
What is the hex code for tomato?
#ff6347 — that is rgb(255, 99, 71) and hsl(9, 100%, 64%). In CSS you can also just write tomato.
Is tomato text readable on white?
Its contrast ratio on white is 2.95 : 1, which fails WCAG — use it for decoration or on a dark background instead.
What colors go well with tomato?
Its complementary color is #47e3ff; analogous colors #ff4788 and #ffbf47 sit next to it on the color wheel.