Nazwany kolor · #D8C2CA
Old Mission Pink
Old Mission Pink to #D8C2CA: rgb(216 194 202), hsl(338 22% 80%), oklch(0.835 0.027 353.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Old Mission Pink color name →
#D8C2CA
oklch(0.835 0.027 353.7)
Konwersje koloru
- HEX
- #d8c2ca
- RGB
- rgb(216 194 202)
- HSL
- hsl(338 22% 80%)
- HWB
- hwb(338 76% 15%)
- OKLCH
- oklch(0.835 0.027 353.7)
- OKLab
- oklab(0.835 0.027 -0.003)
- CIE Lab
- lab(80.48 9.03 -1.04)
- LCH
- lch(80.48 9.09 353.4)
- CMYK
- cmyk(0% 10% 6% 15%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- DCC8CF
- E0CED4
- E4D4DA
- E8DADF
- ECE0E4
- EFE6EA
- F3ECEF
- F7F3F4
- FBF9FA
Odcienie ciemniejsze
- BCA8AF
- A08F95
- 85777C
- 6B6064
- 53494D
- 3B3437
- 252022
- 110E0F
- 020202
Tony
- CFBBC2
- C6B4BB
- BDAEB3
- B4A7AC
- ABA0A4
- A29A9D
- 9A9396
- 918D8E
- 888687
Harmonie kolorów
Komplementarna +180°
- D8C2CA
Old Mission Pink
- B8CFC7
≈ Quiet Drizzle
Analogowa -30° +30°
- D8C2CA
Old Mission Pink
- D2C3D3
≈ Seedless Grape
- DAC2C0
≈ Peony Blush
Triada +120° +240°
- D8C2CA
Old Mission Pink
- C8CBB7
≈ Whispering Pine
- B9CCD8
≈ Light Sea Breeze
Komplementarna rozszczepiona +150° +210°
- D8C2CA
Old Mission Pink
- BFCEBE
≈ Paris White
- B5CED1
≈ Turquoise Grey
Tetrada +90° +180° +270°
- D8C2CA
Old Mission Pink
- D1C8B6
≈ Sandstone Cliff
- B8CFC7
≈ Quiet Drizzle
- C0C9DB
≈ Dancing Mist
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.68:1 · APCA Lc 30
Ag
AAANa czerni
WCAG 12.48:1 · APCA Lc 73
Najlepszy kolor tekstu: #000000
WCAG 12.48:1 (AAA) · APCA Lc 73
Contrast pairs
Fragmenty kodu
CSS
:root {
--old-mission-pink: #d8c2ca;
--old-mission-pink-rgb: 216 194 202;
--old-mission-pink-oklch: oklch(0.835 0.027 353.7);
}
.element {
color: var(--old-mission-pink);
background-color: hsl(338 22% 80%);
border-color: oklch(0.835 0.027 353.7);
}Tailwind CSS v4
@theme {
--color-old-mission-pink: #d8c2ca;
--color-old-mission-pink-50: #fcf2f5;
--color-old-mission-pink-100: #f0e4e8;
--color-old-mission-pink-200: #ded0d4;
--color-old-mission-pink-300: #c4b2b8;
--color-old-mission-pink-400: #ac989f;
--color-old-mission-pink-500: #957f87;
--color-old-mission-pink-600: #7e6c73;
--color-old-mission-pink-700: #65565c;
--color-old-mission-pink-800: #4a3f43;
--color-old-mission-pink-900: #332b2e;
--color-old-mission-pink-950: #1f181b;
}SCSS
$old-mission-pink: #d8c2ca;
$old-mission-pink-rgb: 216, 194, 202;
$old-mission-pink-light: mix(#fff, $old-mission-pink, 20%);
$old-mission-pink-dark: mix(#000, $old-mission-pink, 20%);
.element {
color: $old-mission-pink;
box-shadow: 0 0 0 2px rgba($old-mission-pink, 0.35);
}