Benannte Farbe · #A7CAC9
Impressionist Blue
Impressionist Blue ist #A7CAC9: rgb(167 202 201), hsl(178 25% 72%), oklch(0.813 0.037 194.3). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Teal mean? → · Impressionist Blue color name →
#A7CAC9
oklch(0.813 0.037 194.3)
Farbumrechnungen
- HEX
- #a7cac9
- RGB
- rgb(167 202 201)
- HSL
- hsl(178 25% 72%)
- HWB
- hwb(178 65% 21%)
- OKLCH
- oklch(0.813 0.037 194.3)
- OKLab
- oklab(0.813 -0.036 -0.009)
- CIE Lab
- lab(78.74 -12.23 -3.59)
- LCH
- lch(78.74 12.74 196.4)
- CMYK
- cmyk(17% 0% 0% 21%)
Tints · Shades · Tones
Tints
- B0CFCE
- B9D4D4
- C1DAD9
- CADFDE
- D3E4E4
- DCEAE9
- E4EFEF
- EDF4F4
- F6FAF9
Shades
- 91AFAE
- 7B9595
- 667C7C
- 526464
- 3E4D4C
- 2C3736
- 1A2222
- 0A0F0F
- 010202
Tones
- A3C2C1
- 9FBBBA
- 9CB3B2
- 98ACAB
- 94A4A4
- 909D9C
- 8C9695
- 888E8E
- 848787
Farbharmonien
Komplementär +180°
- A7CAC9
Impressionist Blue
- D9B9BA
≈ Bombay Pink
Analog -30° +30°
- A7CAC9
Impressionist Blue
- ADCABC
≈ Greywacke
- A9C8D4
≈ Vast Sky
Triadisch +120° +240°
- A7CAC9
Impressionist Blue
- CBBBD3
≈ Sweet Petal
- D1BFA8
≈ Vanilla Doe
Geteilt komplementär +150° +210°
- A7CAC9
Impressionist Blue
- D5B9C8
≈ Spring Boutique
- D8BBAF
≈ First Waltz
Tetradisch +90° +180° +270°
- A7CAC9
Impressionist Blue
- BEBFDA
≈ Rhapsody Lilac
- D9B9BA
≈ Bombay Pink
- C5C4A8
≈ Green Gaze
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.75:1 · APCA Lc 32
Ag
AAAAuf Schwarz
WCAG 11.93:1 · APCA Lc 70
Beste Textfarbe: #000000
WCAG 11.93:1 (AAA) · APCA Lc 70
Contrast pairs
Code-Snippets
CSS
:root {
--impressionist-blue: #a7cac9;
--impressionist-blue-rgb: 167 202 201;
--impressionist-blue-oklch: oklch(0.813 0.037 194.3);
}
.element {
color: var(--impressionist-blue);
background-color: hsl(178 25% 72%);
border-color: oklch(0.813 0.037 194.3);
}Tailwind CSS v4
@theme {
--color-impressionist-blue: #a7cac9;
--color-impressionist-blue-50: #eaf9f9;
--color-impressionist-blue-100: #daecec;
--color-impressionist-blue-200: #c3dad9;
--color-impressionist-blue-300: #a2bebe;
--color-impressionist-blue-400: #86a6a5;
--color-impressionist-blue-500: #698e8d;
--color-impressionist-blue-600: #597878;
--color-impressionist-blue-700: #476060;
--color-impressionist-blue-800: #334746;
--color-impressionist-blue-900: #233130;
--color-impressionist-blue-950: #121d1c;
}SCSS
$impressionist-blue: #a7cac9;
$impressionist-blue-rgb: 167, 202, 201;
$impressionist-blue-light: mix(#fff, $impressionist-blue, 20%);
$impressionist-blue-dark: mix(#000, $impressionist-blue, 20%);
.element {
color: $impressionist-blue;
box-shadow: 0 0 0 2px rgba($impressionist-blue, 0.35);
}