Named color · #FFEDCB
Provence Creme
Provence Creme is #FFEDCB: rgb(255 237 203), hsl(39 100% 90%), oklch(0.952 0.048 83.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Provence Creme color name →
#FFEDCB
oklch(0.952 0.048 83.4)
Color conversions
- HEX
- #ffedcb
- RGB
- rgb(255 237 203)
- HSL
- hsl(39 100% 90%)
- HWB
- hwb(39 80% 0%)
- OKLCH
- oklch(0.952 0.048 83.4)
- OKLab
- oklab(0.952 0.006 0.048)
- CIE Lab
- lab(94.56 2.42 18.86)
- LCH
- lch(94.56 19.02 82.7)
- CMYK
- cmyk(0% 7% 20% 0%)
Tints · Shades · Tones
Tints
- FFEFD0
- FFF1D6
- FFF2DB
- FFF4E0
- FFF6E5
- FFF8EA
- FFFAF0
- FFFBF5
- FFFDFA
Shades
- DECEB0
- BEB096
- 9E937D
- 807765
- 635C4D
- 484237
- 2E2A22
- 16140F
- 030302
Tones
- F2E2C3
- E4D6BC
- D7CBB4
- CAC0AD
- BEB5A5
- B1AA9E
- A49F96
- 98958F
- 8C8A87
Color harmonies
Complementary +180°
- FFEDCB
Provence Creme
- E7EFFF
≈ Brilliant White
Analogous -30° +30°
- FFEDCB
Provence Creme
- FFEBDE
≈ Pink Glow
- EEF3CE
≈ Race the Sun
Triadic +120° +240°
- FFEDCB
Provence Creme
- CAF9FE
≈ Thin Air
- FDE7FF
≈ Fairy Bubblegum Cloud
Split-complementary +150° +210°
- FFEDCB
Provence Creme
- DEF3FF
≈ Wizard White
- EFECFF
≈ Placebo Purple
Tetradic +90° +180° +270°
- FFEDCB
Provence Creme
- CFFAEC
≈ Mid Spring Morning
- E7EFFF
≈ Brilliant White
- FFE8F0
≈ Fairy Dust
Contrast & accessibility
Ag
FailOn white
WCAG 1.15:1 · APCA Lc 0
Ag
AAAOn black
WCAG 18.22:1 · APCA Lc 97
Best text color: #000000
WCAG 18.22:1 (AAA) · APCA Lc 97
Contrast pairs
Code snippets
CSS
:root {
--provence-creme: #ffedcb;
--provence-creme-rgb: 255 237 203;
--provence-creme-oklch: oklch(0.952 0.048 83.4);
}
.element {
color: var(--provence-creme);
background-color: hsl(39 100% 90%);
border-color: oklch(0.952 0.048 83.4);
}Tailwind CSS v4
@theme {
--color-provence-creme: #ffedcb;
--color-provence-creme-50: #fbf4e6;
--color-provence-creme-100: #efe7d6;
--color-provence-creme-200: #ded3bd;
--color-provence-creme-300: #c3b69c;
--color-provence-creme-400: #ac9c7e;
--color-provence-creme-500: #968461;
--color-provence-creme-600: #7f7053;
--color-provence-creme-700: #655942;
--color-provence-creme-800: #4b412f;
--color-provence-creme-900: #342d20;
--color-provence-creme-950: #1f1a10;
}SCSS
$provence-creme: #ffedcb;
$provence-creme-rgb: 255, 237, 203;
$provence-creme-light: mix(#fff, $provence-creme, 20%);
$provence-creme-dark: mix(#000, $provence-creme, 20%);
.element {
color: $provence-creme;
box-shadow: 0 0 0 2px rgba($provence-creme, 0.35);
}