Palette collection
Sunset Signals Palette
Red, orange and amber provide three distinct warm directions. Ivory supplies a light surface, while charcoal keeps ordinary reading and outlines grounded.
Give each color a job
A practical starting layout
For a festival poster, reserve red for the main visual, orange for a secondary detail and amber for a small band with dark lettering. In an interface, use ivory for paragraphs and charcoal for text instead of treating all three warm colors as status signals.
These roles are recommendations, not a guarantee of accessibility. Use the controls below to test foreground and background separately. Accent colors can be decorative even when they fail as ordinary text.
Take this palette into your project
Exports include the original five colors and their suggested roles. Use the preview studio to experiment; these downloads keep the published palette unchanged.
CSS variables are available above. PNG and SVG use a labeled 1500 × 680 palette sheet; JSON includes HEX, RGB, HSL and role labels.
See the palette at work
Palette preview studio
Try a website, a game scene, a poster or a room. Pick a role, then select a swatch to repaint it. These are schematic design previews, not rendered materials or a game engine.
Text is automatically chosen as black or white for opaque preview surfaces. This does not certify your exported palette for every use.
Make something worth exploring.
A clear reading surface, one useful accent and room for the details.
Explore the collection →COLOR
IN MOTION
Make room for a new perspective.
Explore. Experiment. Create.Try it in context
Live design & contrast preview
Change the surface and text independently. The text result uses opaque sRGB colors; it does not evaluate your entire page.
12.70:1 · AAA normal text
AA normal text needs 4.5:1; AA large text needs 3:1. Large text means at least 18 pt, or 14 pt bold. Ratios are assessed before rounding. This is a text check, not a complete accessibility audit. W3C: understanding text contrast ↗
Your next good idea
Try a readable heading, a short paragraph and a clear action on this surface.
Example action →Static design sample · use the controls to change itRead the color guides
Red
An unmistakable accent with a demanding contrast pair
Explore color →Orange
A bright yellow-orange for small, warm highlights
Explore color →Amber
A golden orange inspired by translucent resin
Explore color →Ivory
A near-white with a small warm shift
Explore color →Charcoal
A dark blue-gray for text and structure
Explore color →Try another direction
Coastal Coral
A warm subject in cool surroundings
Explore palette →Woodland Paper
Leaf green, warm earth and a light base
Explore palette →Lavender Night
A clear purple light-to-dark ladder
Explore palette →Bold Pink & Blue
A lively accent with a stable dark anchor
Explore palette →Garden Notes
Muted foliage with a bright mint detail
Explore palette →Blueprint Paper
A navy structure with a pale sky-blue surface
Explore palette →Earthwork
Warm browns with an explicit dark outline
Explore palette →Petal Study
A strong rose accent with softer violet neighbors
Explore palette →A color name is a starting point
Digital codes describe sRGB colors. Natural objects, paint, ink and screens can look different under different lighting or calibration. Visual references illustrate color families rather than exact measured matches. Placeholder illustrations are clearly labeled. Design ideas are suggestions, not universal claims about emotion or culture.
Pick colors from an image · Convert a color · Check a complete text pair · Suggest a color guide