color palettesDark · Five colors, clear roles
Edit in the studio ↗Night porcelain
Blue-black pages with porcelain type.
Picture it on your website.
studio / notesA color study
An idea worth exploringSmall details.
Small details.
Whole new perspective.
The right colors give everyday ideas a little more character. Start with a clear canvas and make room for what matters.
Read the field notes01 / A fresh start
Let the details do the talking.
A supporting surface, a useful accent, and text you can actually read.
A note on contrast →Thoughtful colors, considered roles.Explore / Create / Refine
Live HTML preview. Button and accent labels use a derived black or white foreground.
The contrast check
| Pair | Foreground / background | Ratio | Text result |
|---|---|---|---|
| Body text | #F3F2EE / #191C27 | 15.16:1 | AAA text |
| Card text | #F3F2EE / #2A3040 | 11.75:1 | AAA text |
| Primary as a text link | #C7CDE9 / #191C27 | 10.78:1 | AAA text |
| Button label | #000000 / #C7CDE9 | 13.34:1 | AAA text |
| Accent label | #000000 / #E8C58D | 12.80:1 | AAA text |
AA normal: 4.5:1. AA large: 3:1. AAA normal: 7:1. Results use unrounded values. These checks do not certify a whole design. Read the methodology.
Take it with you
Your palette, in CSS.
Names describe the role, so your stylesheet stays useful when your colors change.
:root {
--color-background: #191c27;
--color-surface: #2a3040;
--color-text: #f3f2ee;
--color-primary: #c7cde9;
--color-accent: #e8c58d;
--color-on-primary: #000000;
--color-on-accent: #000000;
}