Nazwany kolor · #ACC2D1
Ruffled Feathers
Ruffled Feathers to #ACC2D1: rgb(172 194 209), hsl(204 29% 75%), oklch(0.802 0.032 237.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Ruffled Feathers color name →
#ACC2D1
oklch(0.802 0.032 237.7)
Konwersje koloru
- HEX
- #acc2d1
- RGB
- rgb(172 194 209)
- HSL
- hsl(204 29% 75%)
- HWB
- hwb(204 67% 18%)
- OKLCH
- oklch(0.802 0.032 237.7)
- OKLab
- oklab(0.802 -0.017 -0.027)
- CIE Lab
- lab(77.11 -5.39 -10.21)
- LCH
- lch(77.11 11.54 242.2)
- CMYK
- cmyk(18% 7% 0% 18%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- B4C8D6
- BCCEDA
- C4D4DF
- CDDAE3
- D5E0E8
- DDE6ED
- E6ECF1
- EEF3F6
- F7F9FA
Odcienie ciemniejsze
- 95A8B5
- 7F8F9B
- 697781
- 546068
- 404950
- 2D3439
- 1B2023
- 0B0E10
- 010202
Tony
- A8BBC9
- A3B4C0
- 9FAEB8
- 9AA7B0
- 96A0A8
- 929AA0
- 8D9398
- 898D90
- 848688
Harmonie kolorów
Komplementarna +180°
- ACC2D1
Ruffled Feathers
- CFBAAB
≈ Corkscrew Willow
Analogowa -30° +30°
- ACC2D1
Ruffled Feathers
- A7C5C9
≈ Skyward
- B5BED4
≈ Peri Wink
Triada +120° +240°
- ACC2D1
Ruffled Feathers
- D1B6BE
≈ Delightful
- BCC2AB
≈ Jungle Moss
Komplementarna rozszczepiona +150° +210°
- ACC2D1
Ruffled Feathers
- D3B7B3
≈ Oyster Pink
- C7BEA8
≈ Jungle Khaki
Tetrada +90° +180° +270°
- ACC2D1
Ruffled Feathers
- CAB8C9
≈ Ballad
- CFBAAB
≈ Corkscrew Willow
- B1C4B3
≈ Zanah
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.84:1 · APCA Lc 35
Ag
AAANa czerni
WCAG 11.39:1 · APCA Lc 68
Najlepszy kolor tekstu: #000000
WCAG 11.39:1 (AAA) · APCA Lc 68
Contrast pairs
Fragmenty kodu
CSS
:root {
--ruffled-feathers: #acc2d1;
--ruffled-feathers-rgb: 172 194 209;
--ruffled-feathers-oklch: oklch(0.802 0.032 237.7);
}
.element {
color: var(--ruffled-feathers);
background-color: hsl(204 29% 75%);
border-color: oklch(0.802 0.032 237.7);
}Tailwind CSS v4
@theme {
--color-ruffled-feathers: #acc2d1;
--color-ruffled-feathers-50: #edf7fe;
--color-ruffled-feathers-100: #dfeaf2;
--color-ruffled-feathers-200: #c8d6e1;
--color-ruffled-feathers-300: #a9bac6;
--color-ruffled-feathers-400: #8da2af;
--color-ruffled-feathers-500: #738a99;
--color-ruffled-feathers-600: #617582;
--color-ruffled-feathers-700: #4e5d68;
--color-ruffled-feathers-800: #38444c;
--color-ruffled-feathers-900: #262f35;
--color-ruffled-feathers-950: #151c20;
}SCSS
$ruffled-feathers: #acc2d1;
$ruffled-feathers-rgb: 172, 194, 209;
$ruffled-feathers-light: mix(#fff, $ruffled-feathers, 20%);
$ruffled-feathers-dark: mix(#000, $ruffled-feathers, 20%);
.element {
color: $ruffled-feathers;
box-shadow: 0 0 0 2px rgba($ruffled-feathers, 0.35);
}