Colore con nome · #EDD8C3
Canadian Pancake
Canadian Pancake è #EDD8C3: rgb(237 216 195), hsl(30 54% 85%), oklch(0.894 0.037 67.3). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Orange mean? → · Canadian Pancake color name →
#EDD8C3
oklch(0.894 0.037 67.3)
Conversioni di colore
- HEX
- #edd8c3
- RGB
- rgb(237 216 195)
- HSL
- hsl(30 54% 85%)
- HWB
- hwb(30 76% 7%)
- OKLCH
- oklch(0.894 0.037 67.3)
- OKLab
- oklab(0.894 0.014 0.034)
- CIE Lab
- lab(87.67 5.04 13.17)
- LCH
- lch(87.67 14.1 69)
- CMYK
- cmyk(0% 9% 18% 7%)
Tinte · Ombre · Toni
Tinte
- EFDCC9
- F1E0CF
- F3E4D5
- F4E8DB
- F6EBE1
- F8EFE7
- FAF3ED
- FBF7F3
- FDFBF9
Ombre
- CEBCA9
- B0A090
- 938578
- 776B60
- 5C534A
- 423B34
- 2A2520
- 14110E
- 030202
Toni
- E2CFBC
- D6C6B5
- CBBDAF
- C0B4A8
- B5ABA1
- AAA29A
- 9F9A94
- 95918D
- 8A8887
Armonie di colore
Complementare +180°
- EDD8C3
Canadian Pancake
- CADFF4
≈ First Shade of Blue
Analogo -30° +30°
- EDD8C3
Canadian Pancake
- F3D4CB
≈ Cool Cantaloupe
- E2DDC2
≈ Flowery
Triadico +120° +240°
- EDD8C3
Canadian Pancake
- C2E4E0
≈ Windwood Spring
- E2D6EF
≈ First Lilac
Complementare divisa +150° +210°
- EDD8C3
Canadian Pancake
- C2E3EC
≈ Serene Sky
- D5DAF5
≈ Quartz
Tetradico +90° +180° +270°
- EDD8C3
Canadian Pancake
- C9E4D3
≈ Duck Egg Cream
- CADFF4
≈ First Shade of Blue
- EDD3E5
≈ Champagne Elegance
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 1.38:1 · APCA Lc 19
Ag
AAASu nero
WCAG 15.21:1 · APCA Lc 85
Miglior colore del testo: #000000
WCAG 15.21:1 (AAA) · APCA Lc 85
Contrast pairs
Frammenti di codice
CSS
:root {
--canadian-pancake: #edd8c3;
--canadian-pancake-rgb: 237 216 195;
--canadian-pancake-oklch: oklch(0.894 0.037 67.3);
}
.element {
color: var(--canadian-pancake);
background-color: hsl(30 54% 85%);
border-color: oklch(0.894 0.037 67.3);
}Tailwind CSS v4
@theme {
--color-canadian-pancake: #edd8c3;
--color-canadian-pancake-50: #fcf4ea;
--color-canadian-pancake-100: #f0e6db;
--color-canadian-pancake-200: #dfd2c4;
--color-canadian-pancake-300: #c4b4a4;
--color-canadian-pancake-400: #ae9b88;
--color-canadian-pancake-500: #97826d;
--color-canadian-pancake-600: #806e5c;
--color-canadian-pancake-700: #66584a;
--color-canadian-pancake-800: #4b4035;
--color-canadian-pancake-900: #342c24;
--color-canadian-pancake-950: #201913;
}SCSS
$canadian-pancake: #edd8c3;
$canadian-pancake-rgb: 237, 216, 195;
$canadian-pancake-light: mix(#fff, $canadian-pancake, 20%);
$canadian-pancake-dark: mix(#000, $canadian-pancake, 20%);
.element {
color: $canadian-pancake;
box-shadow: 0 0 0 2px rgba($canadian-pancake, 0.35);
}