Benannte Farbe · #A8C1D4
Simpatico Blue
Simpatico Blue ist #A8C1D4: rgb(168 193 212), hsl(206 34% 75%), oklch(0.798 0.038 240.8). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Blue mean? → · Simpatico Blue color name →
#A8C1D4
oklch(0.798 0.038 240.8)
Farbumrechnungen
- HEX
- #a8c1d4
- RGB
- rgb(168 193 212)
- HSL
- hsl(206 34% 75%)
- HWB
- hwb(206 66% 17%)
- OKLCH
- oklch(0.798 0.038 240.8)
- OKLab
- oklab(0.798 -0.019 -0.033)
- CIE Lab
- lab(76.64 -5.72 -12.56)
- LCH
- lch(76.64 13.8 245.5)
- CMYK
- cmyk(21% 9% 0% 17%)
Tints · Shades · Tones
Tints
- B1C7D8
- B9CDDD
- C2D3E1
- CADAE5
- D3E0EA
- DCE6EE
- E4ECF2
- EDF2F6
- F6F9FB
Shades
- 92A7B8
- 7C8F9D
- 677783
- 525F69
- 3F4951
- 2C343A
- 1A2024
- 0A0E10
- 010202
Tones
- A4BACB
- A0B4C3
- 9CADBA
- 98A7B2
- 94A0A9
- 9099A1
- 8C9398
- 888D90
- 848688
Farbharmonien
Komplementär +180°
- A8C1D4
Simpatico Blue
- D0B8A5
≈ Cocoa Dust
Analog -30° +30°
- A8C1D4
Simpatico Blue
- A2C4CB
≈ Agua Fría
- B4BCD7
≈ Hazy Sky
Triadisch +120° +240°
- A8C1D4
Simpatico Blue
- D3B3BC
≈ Floss
- B9C1A6
≈ Healing Retreat
Geteilt komplementär +150° +210°
- A8C1D4
Simpatico Blue
- D5B5AE
≈ Oyster Pink
- C6BDA2
≈ Chopped Almonds
Tetradisch +90° +180° +270°
- A8C1D4
Simpatico Blue
- CCB5C9
≈ Janey’s Party
- D0B8A5
≈ Cocoa Dust
- ACC5B1
≈ Zanah
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.86:1 · APCA Lc 35
Ag
AAAAuf Schwarz
WCAG 11.24:1 · APCA Lc 67
Beste Textfarbe: #000000
WCAG 11.24:1 (AAA) · APCA Lc 67
Contrast pairs
Code-Snippets
CSS
:root {
--simpatico-blue: #a8c1d4;
--simpatico-blue-rgb: 168 193 212;
--simpatico-blue-oklch: oklch(0.798 0.038 240.8);
}
.element {
color: var(--simpatico-blue);
background-color: hsl(206 34% 75%);
border-color: oklch(0.798 0.038 240.8);
}Tailwind CSS v4
@theme {
--color-simpatico-blue: #a8c1d4;
--color-simpatico-blue-50: #ecf7ff;
--color-simpatico-blue-100: #ddeaf4;
--color-simpatico-blue-200: #c7d7e4;
--color-simpatico-blue-300: #a7baca;
--color-simpatico-blue-400: #8ba2b3;
--color-simpatico-blue-500: #708a9e;
--color-simpatico-blue-600: #5f7585;
--color-simpatico-blue-700: #4c5d6b;
--color-simpatico-blue-800: #36444e;
--color-simpatico-blue-900: #252f37;
--color-simpatico-blue-950: #141c21;
}SCSS
$simpatico-blue: #a8c1d4;
$simpatico-blue-rgb: 168, 193, 212;
$simpatico-blue-light: mix(#fff, $simpatico-blue, 20%);
$simpatico-blue-dark: mix(#000, $simpatico-blue, 20%);
.element {
color: $simpatico-blue;
box-shadow: 0 0 0 2px rgba($simpatico-blue, 0.35);
}