You are choosing a warm accent color for a button or badge. Pure red (#FF0000) feels too alarming. Pure orange (#FFA500) feels too bright. The color you want sits somewhere in between, and there are five CSS named colors that occupy that exact territory. Knowing the difference between them is not just a trivia question — it determines whether your UI reads as urgent, warm, friendly, or soft.
The Color Name Finder can identify which CSS name is closest to any red-orange HEX you paste in. But before you test a custom value, it helps to know the range of named red-orange colors already in the CSS specification and what separates each from the next.
This guide covers every CSS named color in the red-orange family, explains exactly how the RGB values create the differences you see, and helps you choose the right shade for your design.
The CSS Colors That Sit Between Red and Orange
The red-orange spectrum in CSS contains five named colors between pure red and pure orange. Here they are in order from most-red to most-orange:
| CSS Name | HEX | RGB |
|---|---|---|
| orangered | #FF4500 | R:255, G:69, B:0 |
| tomato | #FF6347 | R:255, G:99, B:71 |
| coral | #FF7F50 | R:255, G:127, B:80 |
| salmon | #FA8072 | R:250, G:128, B:114 |
| lightsalmon | #FFA07A | R:255, G:160, B:122 |
Pure red is #FF0000 (G:0, B:0). Pure orange is #FFA500 (G:165, B:0). Every color above sits between those two anchors, with a steadily rising green channel value moving the color from red toward orange. The blue channel also rises as you move from orangered toward lightsalmon, which is what introduces the pinkish cast you see in salmon and lightsalmon.
This is the mechanical explanation for why coral looks more orange than salmon even though their green channel values are almost identical: coral has a lower blue channel (B:80 versus B:114), which keeps it cleaner and more vivid.
How the RGB Values Create the Red-Orange Spectrum
Every color in the red-orange family shares one feature: the red channel is maxed out or close to it. In RGB color, having R:255 with a rising G value produces the classic warm shift from red to yellow. Stop partway through that shift, with G still below the orange threshold, and you are in red-orange territory.
The blue channel plays a secondary role. When blue is near zero, the color is vivid and saturated. As blue rises, the color becomes softer and more pinkish. That is why salmon and lightsalmon feel warmer and more pastel than orangered and tomato, even though all of them sit in the same general hue range.
The practical consequence is that you have two axes to work with in this color family. One axis runs from red to orange (controlled by the green channel). The other runs from vivid to soft (controlled by the blue channel). Orangered is vivid and red. Lightsalmon is soft and orange-leaning. Coral sits in the middle of both axes, which is why it is the most versatile of the five for design use.
Orangered and Tomato: The Most Intense Red-Oranges
Orangered (#FF4500) is the most explicitly named color in this group. The name compounds two colors directly: orange plus red. Its RGB values are R:255, G:69, B:0. The green channel is low enough to keep it firmly in red territory, and the blue channel is at zero, which gives it maximum saturation. On screen, orangered reads as a strong, hot red with just enough warmth to distinguish it from pure red.
Tomato (#FF6347) is slightly brighter and more orange. Its name refers to the color of a ripe tomato, which in reality varies from coral to deep red depending on variety and ripeness. The CSS tomato hits G:99 and B:71, moving it a step further from red while staying well short of true orange. The blue channel at 71 introduces a small amount of warmth that softens the color just slightly compared to orangered.
Both colors work well for error states, notifications, and strong call-to-action elements. Orangered reads as more urgent; tomato reads as slightly more approachable. If you are building something that needs to say "warning" without triggering full alarm, tomato is the better choice. If you need the color to command immediate attention, orangered does that job more directly.
Coral and Salmon: The Softer Half of the Range
Coral (#FF7F50) sits at the midpoint of the red-orange range. Its green channel is at 127, exactly halfway between 0 (pure red) and 255 (pure yellow-green). Its blue channel at 80 keeps it vivid without adding too much pinkish cast. The result is a color that reads as distinctly orange-red — warm, approachable, and flexible enough to work on light backgrounds without overwhelming them.
Coral gets a lot of design use for this reason. It has the warmth of the red-orange family without the intensity of orangered or tomato. In a palette with neutrals, coral pulls the eye without looking aggressive.
Salmon (#FA8072) is a different animal. Its blue channel at 114 is significantly higher than coral's 80, which introduces the pinkish softness the name suggests. Salmon fish flesh is not a vivid orange-red — it is a muted, slightly pink warm tone, and the CSS color captures that accurately. The red channel is also slightly lower (FA = 250, not 255), adding to the softer overall impression.
The distinction matters in practice. Coral is an accent color. Salmon is a background or secondary color. Using coral as a background will probably be too intense. Using salmon as a primary accent will probably read as too soft. Knowing which direction you need is the most useful thing to know before choosing between them.
Lightsalmon (#FFA07A) moves further toward orange and further toward pastel. With G:160 and B:122, it is the lightest and most orange-adjacent of the five. It works for very soft accents, warm tints, and backgrounds where you want just a hint of warmth.
When to Use Each Red-Orange in Web Design
The five colors break into two practical groups: vivid and soft.
The vivid group contains orangered and tomato. These are high-contrast colors that work as buttons, badges, alerts, and indicators. They stand out on light backgrounds, and they hold up well in small sizes like icons or tags. Both work well on white or off-white backgrounds. Neither works particularly well as a large background color because the intensity is fatiguing at scale.
The soft group contains coral, salmon, and lightsalmon. These work for larger background areas, gradients, cards, section backgrounds, and decorative elements. They pair well with neutrals, warm grays, and cream backgrounds. They do not work as well for tiny alert indicators because the low intensity makes them easy to overlook.
Coral sits between the two groups. It is vivid enough for accent use and soft enough for secondary use. If you need to pick one red-orange for a design system with limited color slots, coral is usually the most useful choice.
Pure Red and Pure Orange as the Boundaries
Understanding the five in-between colors is easier when you anchor them against the boundaries.
Pure red (#FF0000) has G:0 and B:0. It is the most saturated, most intense red possible on screen. No CSS named color in the red-orange family is darker or more vivid. Red is a primary RGB color, which means it cannot be decomposed into more basic colors in the additive system. All the named red-orange colors have something more orange or more pink added to them compared to pure red.
Pure orange (#FFA500) has R:255 and G:165. It is a bright, medium-value orange that sits clearly in orange territory. Darkorange (#FF8C00) is the other named orange, slightly more vivid with G:140. Neither of these is a red-orange — they sit past the boundary where the color reads clearly as orange rather than red-orange.
The five colors above (orangered, tomato, coral, salmon, lightsalmon) all fall in the gap between those two anchors. The green channel for each ranges from 69 to 160, which is why they read as transitional rather than definitively either color.
Finding the Exact Name for Any Red-Orange HEX Code
If you are working with a custom brand red-orange and need to know which CSS name it is closest to, paste the HEX value into the Color Name Finder. The tool uses Delta-E perceptual color matching in CIE Lab space rather than simple Euclidean distance in RGB, which means it finds the perceptually closest name rather than just the mathematically closest number.
For most red-orange values, the result will be one of the five colors above. A very saturated red-orange near #FF4000 will match orangered. A softer pinkish-orange near #FF8080 will match salmon or lightsalmon. A midpoint vivid orange-red near #FF6060 will match tomato or coral depending on the specific values.
If you are building out a palette from a source image and want to identify which CSS family the warm tones belong to, the color palette generator from image extracts the dominant colors automatically. Running those extracted HEX values through the Color Name Finder then tells you which named colors they are closest to.
For adjusting tints and shades of a red-orange you have already chosen, the tints and shades generator takes any base color and outputs a full range from near-white to near-black. Starting from coral and generating its shades gives you a coordinated set of lighter and darker variants that all share the same underlying hue.
The named red-orange colors in CSS give you five precise, reproducible points across a range that most people describe vaguely as "reddish orange." Knowing their exact values and what separates each one is enough to make intentional choices rather than guessing and adjusting until something looks right. Start with the Color Name Finder if you have a specific value in mind, and use the table above if you are choosing from scratch.
