Tinta Opaline Dawn
4-color mesh gradient
Opaline Dawn is a 4-color CSS mesh gradient built from #FBD3DA, #D8EEE5, #B9D7F0, and #F9D9A8. Its hues sit in the pink, blue, and yellow ranges, and reads as pastel, muted, and warm. Dark text (#111827) on it keeps at least 11.86:1 at its weakest point — enough for WCAG AAA body text.
UI Preview
See how this gradient looks in a real interface
Welcome Back
Your creative workspace awaits
ContinueShade scales
Each color as a 50–950 ramp, like Tailwind's built-in palettes — ready for a design system. The ringed step is closest to the original color.
#FBD3DA
#D8EEE5
#B9D7F0
#F9D9A8
@theme {
--color-opaline-dawn-1-50: #FBF6F7;
--color-opaline-dawn-1-100: #F3E9EB;
--color-opaline-dawn-1-200: #E8D5D8;
--color-opaline-dawn-1-300: #D7BBC0;
--color-opaline-dawn-1-400: #BC9AA0;
--color-opaline-dawn-1-500: #A48086;
--color-opaline-dawn-1-600: #8A696F;
--color-opaline-dawn-1-700: #715359;
--color-opaline-dawn-1-800: #5A4146;
--color-opaline-dawn-1-900: #473337;
--color-opaline-dawn-1-950: #2E1F22;
}
@theme {
--color-opaline-dawn-2-50: #F4F8F7;
--color-opaline-dawn-2-100: #E6EEEB;
--color-opaline-dawn-2-200: #D0DFD9;
--color-opaline-dawn-2-300: #B2C9C0;
--color-opaline-dawn-2-400: #8FACA1;
--color-opaline-dawn-2-500: #739387;
--color-opaline-dawn-2-600: #5D7B6F;
--color-opaline-dawn-2-700: #496359;
--color-opaline-dawn-2-800: #394F46;
--color-opaline-dawn-2-900: #2C3E37;
--color-opaline-dawn-2-950: #1A2722;
}
@theme {
--color-opaline-dawn-3-50: #F4F8FB;
--color-opaline-dawn-3-100: #E6EDF4;
--color-opaline-dawn-3-200: #CFDDE8;
--color-opaline-dawn-3-300: #B2C6D7;
--color-opaline-dawn-3-400: #8EA8BE;
--color-opaline-dawn-3-500: #728EA6;
--color-opaline-dawn-3-600: #5C778C;
--color-opaline-dawn-3-700: #485F72;
--color-opaline-dawn-3-800: #384C5B;
--color-opaline-dawn-3-900: #2C3B48;
--color-opaline-dawn-3-950: #1A252F;
}
@theme {
--color-opaline-dawn-4-50: #FBF7F1;
--color-opaline-dawn-4-100: #F3EBDF;
--color-opaline-dawn-4-200: #E7D9C3;
--color-opaline-dawn-4-300: #D6C09F;
--color-opaline-dawn-4-400: #BBA076;
--color-opaline-dawn-4-500: #A38557;
--color-opaline-dawn-4-600: #8A6E42;
--color-opaline-dawn-4-700: #705831;
--color-opaline-dawn-4-800: #594525;
--color-opaline-dawn-4-900: #46361C;
--color-opaline-dawn-4-950: #2E220E;
}Light & dark theme
This palette as semantic tokens for a real interface, in both modes. Text, muted text and button labels are adjusted until they pass WCAG AA.
Light
Weekly summary
Everything your team shipped since Monday.
Dark
Weekly summary
Everything your team shipped since Monday.
:root {
--background: #F8FBFA;
--surface: #F0F5F3;
--text: #151C1A;
--muted: #5D6662;
--border: #D8E0DD;
--primary: #AB8D5F;
--primary-foreground: #1C1917;
--accent: #7995AD;
--accent-foreground: #1C1917;
}
.dark {
--background: #0B110F;
--surface: #141B18;
--text: #E7F1ED;
--muted: #9EA7A3;
--border: #2E3532;
--primary: #F9D9A8;
--primary-foreground: #1C1917;
--accent: #B9D7F0;
--accent-foreground: #1C1917;
}Contrast checker
Text color (rows) on background (columns), scored against WCAG 2.1. 0 of 12 palette combinations are readable as body text. White and near-black text are included for comparison.
| Text ↓ / Bg → | #FBD3DA | #D8EEE5 | #B9D7F0 | #F9D9A8 |
|---|---|---|---|---|
| #FBD3DA | Same color | 1.1Fail | 1.1Fail | 1.0Fail |
| #D8EEE5 | 1.1Fail | Same color | 1.2Fail | 1.1Fail |
| #B9D7F0 | 1.1Fail | 1.2Fail | Same color | 1.1Fail |
| #F9D9A8 | 1.0Fail | 1.1Fail | 1.1Fail | Same color |
| White | 1.4Fail | 1.2Fail | 1.5Fail | 1.4Fail |
| Near-black | 12.9AAA | 14.4AAA | 11.7AAA | 12.9AAA |
AAA ≥ 7:1 · AA ≥ 4.5:1 body text· AA18 ≥ 3:1 large text (18pt, or 14pt bold) only
Text that works on each color
- Near-black on #FBD3DA · 12.9:1
- Near-black on #D8EEE5 · 14.4:1
- Near-black on #B9D7F0 · 11.7:1
- Near-black on #F9D9A8 · 12.9:1
Suggested fixes for 12 failing pairs
The nearest shade of the text color that passes AA (4.5:1), keeping its hue. Click one to copy it.
Color blindness check
About 1 in 12 men and 1 in 200 women see color differently. Simulated with the Machado (2009) model.
No green cones — the most common form. Pale Pink, #FBD3DA and Light Blue, #B9D7F0; Cloud, #D8EEE5 and Wheat, #F9D9A8 become hard to tell apart — don't rely on color alone to separate them.
What are the HEX, RGB, and HSL values for Opaline Dawn?
Every color in this 4-color set, with its contrast ratio against white and black.
| Color | Name | HEX | RGB | HSL | On white | On black |
|---|---|---|---|---|---|---|
| #FBD3DA | Pale Pink | #FBD3DA | 251, 211, 218 | 350°, 83%, 91% | 1.36:1 | 15.43:1 |
| #D8EEE5 | Cloud | #D8EEE5 | 216, 238, 229 | 155°, 39%, 89% | 1.22:1 | 17.28:1 |
| #B9D7F0 | Light Blue | #B9D7F0 | 185, 215, 240 | 207°, 65%, 83% | 1.50:1 | 14.04:1 |
| #F9D9A8 | Wheat | #F9D9A8 | 249, 217, 168 | 36°, 87%, 82% | 1.35:1 | 15.52:1 |
Related mesh gradients
Others sharing the same hues and tone