Nazwany kolor · #FFD2AB
Vanilla Française
Vanilla Française to #FFD2AB: rgb(255 210 171), hsl(28 100% 84%), oklch(0.893 0.072 62.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Vanilla Française color name →
#FFD2AB
oklch(0.893 0.072 62.6)
Konwersje koloru
- HEX
- #ffd2ab
- RGB
- rgb(255 210 171)
- HSL
- hsl(28 100% 84%)
- HWB
- hwb(28 67% 0%)
- OKLCH
- oklch(0.893 0.072 62.6)
- OKLab
- oklab(0.893 0.033 0.064)
- CIE Lab
- lab(87.45 12.4 25.65)
- LCH
- lch(87.45 28.49 64.2)
- CMYK
- cmyk(0% 18% 33% 0%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FFD7B4
- FFDBBC
- FFE0C4
- FFE4CD
- FFE9D5
- FFEDDE
- FFF2E6
- FFF6EE
- FFFBF7
Odcienie ciemniejsze
- DEB694
- BE9B7E
- 9E8168
- 806854
- 635040
- 48392D
- 2E241B
- 16100B
- 030201
Tony
- F2CAA7
- E5C1A3
- D8B99F
- CBB19A
- BEA896
- B1A092
- A5988D
- 989089
- 8C8884
Harmonie kolorów
Komplementarna +180°
- FFD2AB
Vanilla Française
- BCE1FF
≈ Dithered Sky
Analogowa -30° +30°
- FFD2AB
Vanilla Française
- FFCFC4
≈ Snow Pa
- ECDBA5
≈ Refreshing Tea
Triada +120° +240°
- FFD2AB
Vanilla Française
- A6ECE0
≈ Mint Tea
- E4D2FF
≈ Pale Lavender
Komplementarna rozszczepiona +150° +210°
- FFD2AB
Vanilla Française
- A3E9F8
≈ Fresh Air
- D0DAFF
≈ Icy Plains
Tetrada +90° +180° +270°
- FFD2AB
Vanilla Française
- B8EAC5
≈ Slime Lime
- BCE1FF
≈ Dithered Sky
- F9CBF1
≈ Kissed by Mist
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.39:1 · APCA Lc 19
Ag
AAANa czerni
WCAG 15.05:1 · APCA Lc 84
Najlepszy kolor tekstu: #000000
WCAG 15.05:1 (AAA) · APCA Lc 84
Contrast pairs
Fragmenty kodu
CSS
:root {
--vanilla-francaise: #ffd2ab;
--vanilla-francaise-rgb: 255 210 171;
--vanilla-francaise-oklch: oklch(0.893 0.072 62.6);
}
.element {
color: var(--vanilla-francaise);
background-color: hsl(28 100% 84%);
border-color: oklch(0.893 0.072 62.6);
}Tailwind CSS v4
@theme {
--color-vanilla-francaise: #ffd2ab;
--color-vanilla-francaise-50: #fff1e0;
--color-vanilla-francaise-100: #fae4cf;
--color-vanilla-francaise-200: #ebcfb5;
--color-vanilla-francaise-300: #d2b091;
--color-vanilla-francaise-400: #be9572;
--color-vanilla-francaise-500: #a97b53;
--color-vanilla-francaise-600: #8e6947;
--color-vanilla-francaise-700: #725438;
--color-vanilla-francaise-800: #553c28;
--color-vanilla-francaise-900: #3b2a1b;
--color-vanilla-francaise-950: #25170b;
}SCSS
$vanilla-francaise: #ffd2ab;
$vanilla-francaise-rgb: 255, 210, 171;
$vanilla-francaise-light: mix(#fff, $vanilla-francaise, 20%);
$vanilla-francaise-dark: mix(#000, $vanilla-francaise, 20%);
.element {
color: $vanilla-francaise;
box-shadow: 0 0 0 2px rgba($vanilla-francaise, 0.35);
}