Benannte Farbe · #C9D0B8
Sweet Surrender
Sweet Surrender ist #C9D0B8: rgb(201 208 184), hsl(78 20% 77%), oklch(0.846 0.033 120.3). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Sweet Surrender color name →
#C9D0B8
oklch(0.846 0.033 120.3)
Farbumrechnungen
- HEX
- #c9d0b8
- RGB
- rgb(201 208 184)
- HSL
- hsl(78 20% 77%)
- HWB
- hwb(78 72% 18%)
- OKLCH
- oklch(0.846 0.033 120.3)
- OKLab
- oklab(0.846 -0.017 0.029)
- CIE Lab
- lab(82.44 -5.63 11.1)
- LCH
- lch(82.44 12.45 116.9)
- CMYK
- cmyk(3% 0% 12% 18%)
Tints · Shades · Tones
Tints
- CED5BF
- D4D9C6
- D9DECD
- DEE3D4
- E4E7DB
- E9ECE2
- EFF1E9
- F4F5F1
- F9FAF8
Shades
- AEB5A0
- 959A88
- 7C8071
- 64675B
- 4C4F45
- 363931
- 22231E
- 0F100C
- 020202
Tones
- C1C8B2
- BABFAD
- B2B7A7
- ABAFA1
- A4A79C
- 9C9F96
- 959791
- 8E8F8B
- 878885
Farbharmonien
Komplementär +180°
- C9D0B8
Sweet Surrender
- CFC8DF
≈ Dust of the Moon
Analog -30° +30°
- C9D0B8
Sweet Surrender
- D5CCB4
≈ Ecru Wealth
- BED3C1
≈ Garden Statue
Triadisch +120° +240°
- C9D0B8
Sweet Surrender
- BAD0E0
≈ Chapel Choir
- E0C4CB
≈ Bunny Pink
Geteilt komplementär +150° +210°
- C9D0B8
Sweet Surrender
- C4CCE3
≈ Periwinkle Powder
- DAC5D7
≈ Blissful
Tetradisch +90° +180° +270°
- C9D0B8
Sweet Surrender
- B4D3D9
≈ Subtle Breeze
- CFC8DF
≈ Dust of the Moon
- E1C5BF
≈ Golden Guernsey
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.59:1 · APCA Lc 27
Ag
AAAAuf Schwarz
WCAG 13.19:1 · APCA Lc 76
Beste Textfarbe: #000000
WCAG 13.19:1 (AAA) · APCA Lc 76
Contrast pairs
Code-Snippets
CSS
:root {
--sweet-surrender: #c9d0b8;
--sweet-surrender-rgb: 201 208 184;
--sweet-surrender-oklch: oklch(0.846 0.033 120.3);
}
.element {
color: var(--sweet-surrender);
background-color: hsl(78 20% 77%);
border-color: oklch(0.846 0.033 120.3);
}Tailwind CSS v4
@theme {
--color-sweet-surrender: #c9d0b8;
--color-sweet-surrender-50: #f3f7ec;
--color-sweet-surrender-100: #e6eade;
--color-sweet-surrender-200: #d1d7c7;
--color-sweet-surrender-300: #b4baa8;
--color-sweet-surrender-400: #9ba28c;
--color-sweet-surrender-500: #838a71;
--color-sweet-surrender-600: #6f7560;
--color-sweet-surrender-700: #595d4d;
--color-sweet-surrender-800: #414437;
--color-sweet-surrender-900: #2d2f26;
--color-sweet-surrender-950: #1a1c14;
}SCSS
$sweet-surrender: #c9d0b8;
$sweet-surrender-rgb: 201, 208, 184;
$sweet-surrender-light: mix(#fff, $sweet-surrender, 20%);
$sweet-surrender-dark: mix(#000, $sweet-surrender, 20%);
.element {
color: $sweet-surrender;
box-shadow: 0 0 0 2px rgba($sweet-surrender, 0.35);
}