You opened a stylesheet written by someone else and ran into color: sienna on a paragraph element. You know it is a brownish color, but you cannot picture exactly which brown. You open the browser, inspect the element, and get #A0522D. Now you want to know what all the other S colors look like so you have the full picture before touching anything. The Color Name Finder can convert any HEX back to its CSS name, but this guide covers every S color from scratch.
The letter S produces the largest single-letter group in the CSS named color list. Twelve distinct colors starting with S span an unusually wide range: from warm earth tones like sienna and sandybrown through cool blues like steelblue and slateblue, with everything from vivid springgreen to near-white seashell and snow in between.
The 12 CSS Named Colors That Start with S
Here is the complete list with HEX codes and a brief description of each:
| CSS Name | HEX | Character |
|---|---|---|
| salmon | #FA8072 | Pinkish orange-red |
| sandybrown | #F4A460 | Warm golden tan |
| seagreen | #2E8B57 | Medium dark blue-green |
| seashell | #FFF5EE | Pale off-white with peachy tint |
| sienna | #A0522D | Reddish-brown earth tone |
| silver | #C0C0C0 | Neutral light gray |
| skyblue | #87CEEB | Light medium blue |
| slateblue | #6A5ACD | Medium blue-purple |
| slategray | #708090 | Cool medium gray with blue tint |
| snow | #FFFAFA | Near-white with trace warm tint |
| springgreen | #00FF7F | Vivid blue-green at full saturation |
| steelblue | #4682B4 | Medium desaturated blue |
CSS also accepts slategrey as an alternate spelling. Both forms map to the same HEX value (#708090). No other S color has a dual-spelling variant.
Warm S Colors: Salmon, Sandybrown, Sienna, and Seashell
The warm end of the S family covers a range from pinkish orange through golden tan through reddish brown, ending at the near-white warmth of seashell.
Salmon (#FA8072) is named after the color of salmon fish flesh: a pinkish orange-red. Its RGB values are R:250, G:128, B:114. The blue channel at 114 gives it the pinkish cast that separates it from more vivid red-orange colors like coral or tomato. Salmon works well as a soft accent or warm background tint. It reads as feminine or food-related in some design contexts, which is worth keeping in mind before using it in brand color systems that need to avoid those associations.
Sandybrown (#F4A460) captures the color of wet sand on a beach: a warm golden tan that sits between orange and brown. Its RGB is R:244, G:164, B:96. It is more muted than a true orange and softer than sienna. Sandybrown is underused in web design given how well it reads as a neutral warm tone. It pairs cleanly with cream, white, and dark brown, making it useful for earthy or natural palettes.
Sienna (#A0522D) is the deepest and most saturated of the warm S colors. Its name comes from the pigment extracted from clay soils near Siena, Italy. Raw sienna is a yellow-brown; burnt sienna (the basis for the CSS color) is a darker, more orange-brown resulting from heating the raw pigment. Artists have used this pigment family since at least the 15th century. The CSS version at #A0522D is firmly in the warm brown-red range with R:160, G:82, B:45.
Seashell (#FFF5EE) is the warmest near-white in the S group. Named after the interior surface of a shell, it is an extremely pale off-white with a faint warm peachy tint from its RGB values: R:255, G:245, B:238. The slight drop in the green and blue channels is what creates the warmth. Seashell is often used for page backgrounds when pure white feels too stark and ivory feels too noticeably yellow.
The Art History Behind Sienna
Sienna deserves its own section because it is one of the few CSS colors with a documented artistic lineage.
The pigments raw sienna and burnt sienna have been used in oil painting, fresco, and watercolor since the Renaissance. Raw sienna is a yellow-ochre earth pigment containing hydrated iron oxide. When heated (calcined), it darkens and shifts toward orange-brown, producing burnt sienna. Both pigments were abundant near Siena in Tuscany and were among the earliest commercially traded art materials in Europe.
Burnt sienna became particularly associated with warm glazing in oil painting. Artists like Rembrandt and Titian used it in underpainting layers to establish the warm mid-tones before layering cooler colors. The pigment remained in continuous use through the 20th century and appears today in most watercolor sets.
The CSS color named sienna (#A0522D) matches the darker, more orange-brown character of burnt sienna rather than the lighter, more golden raw sienna. If you need the lighter variant, palegoldenrod (#EEE8AA) or sandybrown (#F4A460) sit closer to raw sienna territory.
Cool S Colors: Steelblue, Slateblue, Skyblue, and Springgreen
The cool end of the S family covers blues, blue-purples, and one vivid green.
Steelblue (#4682B4) is named after the blue tone of tempered steel. When steel is heated and then cooled, it oxidizes and develops a characteristic blue-gray surface color. The CSS steelblue has RGB R:70, G:130, B:180 — a medium-value, desaturated blue that reads as composed and reliable. It is one of the most commonly used named blues in web design for links, buttons, and UI accents because it is vivid enough to stand out without being as intense as dodgerblue or cornflowerblue.
Skyblue (#87CEEB) is lighter and brighter than steelblue. With RGB R:135, G:206, B:235, it captures the color of a clear daytime sky at roughly midday. The high blue channel and relatively high green and red channels make it noticeably lighter than most other named blues. Skyblue works well for backgrounds that need a gentle blue presence without the weight of a saturated color. It is a natural fit for weather, travel, and outdoor content.
Slateblue (#6A5ACD) sits in the blue-purple family. With RGB R:106, G:90, B:205, its red channel (106) gives it a visible purple cast compared to the other S blues. Slate rock has a distinctive blue-gray color, and slateblue takes the bluer end of that range. It is darker than mediumpurple and more blue than violet, making it a useful middle ground in palette-building when you need a color between cool blue and warm purple.
Springgreen (#00FF7F) is the most vivid color in the entire S family. Its RGB values are R:0, G:255, B:127 — the red channel is completely off, making it a pure combination of green and blue light at maximum brightness. Named after the bright, almost luminous green of new plant growth in spring, CSS springgreen is extremely saturated and reads as electric green in most contexts. It is rare in commercial web design because the intensity is difficult to pair, but it has uses in gaming, neon-aesthetic work, and data visualization.
The Gray and Near-White S Colors: Silver, Slategray, and Snow
Silver (#C0C0C0) is one of the 16 original HTML colors and one of the most recognizable CSS names. Its RGB is R:192, G:192, B:192 — equal values in all three channels produce a neutral gray. The HEX value C0C0C0 was chosen partly because it is visually clean and memorable. Silver is a medium-light gray that pairs with almost any color and is widely used for borders, dividers, disabled states, and secondary UI elements.
Slategray (#708090) is a darker, cooler gray than silver. With RGB R:112, G:128, B:144, the blue channel (144) is the highest of the three, giving it a definite blue undertone. This blue cast makes slategray feel cooler and more professional than a neutral gray like silver or gainsboro. It is commonly used for text on light backgrounds when pure black feels too harsh, and for headers, captions, and secondary information labels. The color families guide covers how slategray fits into the neutral color family alongside other cool grays.
Snow (#FFFAFA) is a near-white with a barely perceptible warm tint. Its RGB is R:255, G:250, B:250. The green and blue channels are both at 250 instead of 255, which introduces a very slight pinkish warmth. In practice, snow and white are virtually indistinguishable unless placed directly next to each other on screen. Snow is named after the observation that fresh snow is never perfectly pure white because the crystalline structure of ice scatters and absorbs light in ways that introduce slight color variation. You can test any near-white value against the full list of CSS options using the Color Name Finder.
Why CSS Accepts Both Slategray and Slategrey
CSS named colors include five pairs of identical colors with alternate spellings to accommodate both American English (gray) and British English (grey):
- gray / grey (#808080)
- darkgray / darkgrey (#A9A9A9)
- lightgray / lightgrey (#D3D3D3)
- dimgray / dimgrey (#696969)
- slategray / slategrey (#708090)
All five gray-family pairs are functionally identical. Both spellings are valid in any CSS color property, and both produce the exact same rendered output. This was a deliberate design decision in the CSS Color specification to avoid penalizing developers based on their regional spelling conventions.
If you are inheriting a codebase with mixed gray/grey spellings, either form is correct. Standardizing to one spelling is a code style choice rather than a functional necessity. Most style guides pick one and stick with it.
Seagreen and the S Colors That Bridge Cool and Warm
Seagreen (#2E8B57) does not fit neatly into either the warm or cool group. With RGB R:46, G:139, B:87, it has a dominant green channel that gives it the name, but the relatively low red channel (46) makes it darker and more muted than springgreen. Seagreen reads as a rich, medium-dark green with a slight cool tilt. It sits between forestgreen (#228B22) and mediumseagreen (#3CB371) in terms of brightness and saturation.
The name references the color of shallow coastal seawater over vegetation — a green that is not vivid like grass but not dull like olive. Seagreen is a practical design color for natural, environmental, and wellness contexts. It pairs well with cream backgrounds, warm tans, and navy blues.
Finding the Closest CSS Name for Any S-Range Color
If you are working with a custom color that you suspect is close to one of the S names — a steelblue-adjacent brand blue, or a coral-adjacent warm tone — paste the HEX value into the Color Name Finder to get the exact match. The tool calculates perceptual distance using Delta-E in CIE Lab space, which gives a more accurate result than simple RGB distance matching.
For generating a full range of tints and shades from any S color you have chosen, the tints and shades generator takes a base color and produces a complete scale. Starting from steelblue and generating its tints gives you a set of coordinated blues that share the same underlying character. The same works for sienna if you need a warm brown scale.
The S family covers more ground than any other letter in CSS named colors. From sienna's Renaissance history to springgreen's electric saturation to slategray's quiet professionalism, each color has a specific character that makes it useful in different contexts. The color section has the full range of color tools if you need to build out a palette, check contrast ratios, or extract colors from an image.
