Nazwany kolor · #FFD2A9
Opalescent Coral
Opalescent Coral to #FFD2A9: rgb(255 210 169), hsl(29 100% 83%), oklch(0.893 0.074 64). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Opalescent Coral color name →
#FFD2A9
oklch(0.893 0.074 64)
Konwersje koloru
- HEX
- #ffd2a9
- RGB
- rgb(255 210 169)
- HSL
- hsl(29 100% 83%)
- HWB
- hwb(29 66% 0%)
- OKLCH
- oklch(0.893 0.074 64)
- OKLab
- oklab(0.893 0.032 0.066)
- CIE Lab
- lab(87.42 12.23 26.64)
- LCH
- lch(87.42 29.31 65.3)
- CMYK
- cmyk(0% 18% 34% 0%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FFD7B2
- FFDBBA
- FFE0C3
- FFE4CC
- FFE9D4
- FFEDDD
- FFF2E5
- FFF6EE
- FFFBF6
Odcienie ciemniejsze
- DEB692
- BE9B7C
- 9E8167
- 806853
- 63503F
- 48392C
- 2E241B
- 16100A
- 030201
Tony
- F2CAA5
- E5C1A1
- D8B99D
- CBB199
- BEA895
- B1A091
- A5988D
- 989089
- 8C8884
Harmonie kolorów
Komplementarna +180°
- FFD2A9
Opalescent Coral
- BDE1FF
≈ Dithered Sky
Analogowa -30° +30°
- FFD2A9
Opalescent Coral
- FFCFC3
≈ Snow Pa
- EBDCA4
≈ Refreshing Tea
Triada +120° +240°
- FFD2A9
Opalescent Coral
- A3ECE1
≈ Oasis Stream
- E5D2FF
≈ Mousse aux Pruneaux
Komplementarna rozszczepiona +150° +210°
- FFD2A9
Opalescent Coral
- A2E9FA
≈ Fresh Air
- D0DAFF
≈ Icy Plains
Tetrada +90° +180° +270°
- FFD2A9
Opalescent Coral
- B6EBC6
≈ Slime Lime
- BDE1FF
≈ Dithered Sky
- FBCAF0
≈ Rosy Maple Moth
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.39:1 · APCA Lc 19
Ag
AAANa czerni
WCAG 15.04:1 · APCA Lc 84
Najlepszy kolor tekstu: #000000
WCAG 15.04:1 (AAA) · APCA Lc 84
Contrast pairs
Fragmenty kodu
CSS
:root {
--opalescent-coral: #ffd2a9;
--opalescent-coral-rgb: 255 210 169;
--opalescent-coral-oklch: oklch(0.893 0.074 64);
}
.element {
color: var(--opalescent-coral);
background-color: hsl(29 100% 83%);
border-color: oklch(0.893 0.074 64);
}Tailwind CSS v4
@theme {
--color-opalescent-coral: #ffd2a9;
--color-opalescent-coral-50: #fff2e0;
--color-opalescent-coral-100: #fae4cf;
--color-opalescent-coral-200: #ebcfb4;
--color-opalescent-coral-300: #d2b090;
--color-opalescent-coral-400: #be9670;
--color-opalescent-coral-500: #a97c51;
--color-opalescent-coral-600: #8f6945;
--color-opalescent-coral-700: #725437;
--color-opalescent-coral-800: #553d27;
--color-opalescent-coral-900: #3b2a1a;
--color-opalescent-coral-950: #25170b;
}SCSS
$opalescent-coral: #ffd2a9;
$opalescent-coral-rgb: 255, 210, 169;
$opalescent-coral-light: mix(#fff, $opalescent-coral, 20%);
$opalescent-coral-dark: mix(#000, $opalescent-coral, 20%);
.element {
color: $opalescent-coral;
box-shadow: 0 0 0 2px rgba($opalescent-coral, 0.35);
}