ColorPairLabBerry Oat colors and roles
Berry Oat brings a dark berry ink to a warm oat page. Medium berry and tan offer two ways to distinguish a feature card; choose their label colors from the matrix below.
| Token | Exact sRGB value | Suggested starting role |
|---|---|---|
| --color-1 | #4C233D | Primary ink |
| --color-2 | #F7F0E4 | Main surface |
| --color-3 | #9A4F76 | Action or emphasis candidate |
| --color-4 | #D8BFA3 | Supporting panel or accent |
The main text and background pair
Start with #4C233D text on #F7F0E4. At 11.48:1, this pair passes AA and AAA for normal text. Check the other combinations before assigning them to labels or paragraphs.
Compare all 16 color pairs
| Text / background | #4C233D | #F7F0E4 | #9A4F76 | #D8BFA3 |
|---|---|---|---|---|
| #4C233D | 1.00:1 | 11.48:1 | 2.32:1 | 7.37:1 |
| #F7F0E4 | 11.48:1 | 1.00:1 | 4.94:1 | 1.56:1 |
| #9A4F76 | 2.32:1 | 4.94:1 | 1.00:1 | 3.17:1 |
| #D8BFA3 | 7.37:1 | 1.56:1 | 3.17:1 | 1.00:1 |
Read a row as the text color and a column as its background. Matching colors sit on the diagonal at 1.00:1. Mirrored cells share a ratio but reverse the roles. Focus on the pairs you plan to use; a decorative accent does not have to work as text on every surface.
Turn the swatches into roles
- Try #4C233D for text on the #F7F0E4 background.
- Compare #9A4F76 with the light and dark swatches before using it for a link or button.
- Choose a measured text color for any label placed on #D8BFA3.
- Keep a note of which colors serve as body text, headings, backgrounds and decoration.
:root {
--color-1: #4C233D;
--color-2: #F7F0E4;
--color-3: #9A4F76;
--color-4: #D8BFA3;
}Edit the palette and save your files
Open the palette in the builder to edit, reorder or lock colors. Download CSS for the ordered color tokens, JSON to reopen the palette, or SVG for a swatch card. Keep role notes alongside those files. Switching the app’s light or dark theme leaves the palette values unchanged.