Where the names come from
Founded in the early 1900s, Crayola has created hundreds of crayon colors. Names are playful (Macaroni and Cheese, Electric Lime), descriptive (Burnt Sienna, Cornflower), or themed for special sets.
Color decisions were driven by marketing, education and fun — tied to pigments, dyes and wax formulations applied to paper.
CSS named colors come largely from early HTML color attributes and the X11 window system's color database (lavenderblush, cornsilk, darkslategray).
Compiled and standardised by web standards groups to give developers a small, convenient set of labels. There are currently 147 CSS named colors plus special keywords.
How they're defined technically
Crayola
Originally each color is defined by a physical crayon formulation — there is no canonical sRGB or hex mapping. Digital approximations have been produced via scanning and community work; these vary between sources.
On ColorR, Crayola colors are represented as a name + an agreed sRGB/hex approximation, with derived models (HSL, Lab, OKLCH) computed mathematically from that sRGB value.
CSS Named Colors
The CSS spec defines an exact mapping from keywords to sRGB triplets. tomato is always #ff6347; rebeccapurple is always #663399. These are canonical and stable across all browsers.
On ColorR, CSS named colors use the official hex with derived models for analysis and comparison.
Naming style and personality
Names evoke objects (Banana Mania, Forest Green), feelings (Melon, Jazzberry Jam) and scenes (Sunset Orange). The goal is delight and imagination — especially for children.
In a digital UI, these names can inspire palettes or serve as fun labels in creative tools, but are not CSS identifiers.
A mix of basic hues (red, green), compound adjectives (darkslategray, lightseagreen) and quirky terms (papayawhip, peachpuff). Intent was developer convenience, not branding.
Quick to type, but sometimes less clear than hex — darkgray is actually lighter than dimgray.
How they map into UI work
Using Crayola digitally
Great for nostalgic or playful themes, educational apps, kids' games and drawing tools. Also useful for generating inspiration palettes for more serious UI systems.
Because they're approximations, treat them as starting points: fine-tune sRGB values and integrate into a structured scale (Tailwind/Open Color style steps) before shipping.
Practical Crayola workflow on ColorR
- Pick a color like
CornflowerorBurnt Siennain the Crayola collection - Find the closest Tailwind / Radix / Open Color hue for your actual UI palette
- Build a proper scale (with tints, shades and semantics) from there
Using CSS named colors
Good for quick prototypes, code examples and teaching (color: tomato; is self-explanatory). For real design systems, they have drawbacks:
- No scales — no obvious "lighter tomato" or "tomato-700"
- No systematic semantics — tomato could be brand or error
- No built-in support for light/dark pairing or accessibility
Common pattern: use named colors in experimentation and tutorials, then replace with token-based system colors before launching.
Pros and cons
Crayola colors
Pros
- Strong emotional and cultural resonance
- Wide variety of distinctive hues
- Great for marketing visuals, illustrations and creative tools
Cons
- Digital RGB mappings are approximations
- Not structured into UI-friendly scales
- Not directly usable as CSS identifiers
CSS named colors
Pros
- Built-in to every browser
- Easy to write and remember
- Great for demos, teaching and quick prototypes
Cons
- Limited set (147 colors) and inconsistent aesthetics
- No structured scales or semantics
- Hard to translate into robust tokens and design systems
A practical workflow combining both
Explore Crayola for a memorable base hue
e.g. Cornflower, Sea Green
Find the closest structured hue on ColorR
Tailwind, Open Color, Radix
Build a proper UI palette
Scales, semantics, tokens
Surface Crayola names as personality
In marketing content or playful parts of the app
Use CSS named colors for documentation
Reference as historical context; show how they map into your modern palette