Benannte Farbe · #A5B4AC
Atlantic Foam
Atlantic Foam ist #A5B4AC: rgb(165 180 172), hsl(148 9% 68%), oklch(0.756 0.02 162.8). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Atlantic Foam color name →
#A5B4AC
oklch(0.756 0.02 162.8)
Farbumrechnungen
- HEX
- #a5b4ac
- RGB
- rgb(165 180 172)
- HSL
- hsl(148 9% 68%)
- HWB
- hwb(148 65% 29%)
- OKLCH
- oklch(0.756 0.02 162.8)
- OKLab
- oklab(0.756 -0.019 0.006)
- CIE Lab
- lab(71.95 -6.57 2.22)
- LCH
- lch(71.95 6.93 161.4)
- CMYK
- cmyk(8% 0% 4% 29%)
Tints · Shades · Tones
Tints
- AEBBB4
- B6C3BC
- BFCAC4
- C8D1CC
- D1D9D5
- DAE0DD
- E3E8E5
- EDF0EE
- F6F7F6
Shades
- 8F9C95
- 79857F
- 656E69
- 515854
- 3D4440
- 2B302D
- 1A1D1B
- 0A0C0B
- 010201
Tones
- A1AFA7
- 9EA9A3
- 9AA49F
- 969F9A
- 929A96
- 8F9491
- 8B8F8D
- 878A89
- 848584
Farbharmonien
Komplementär +180°
- A5B4AC
Atlantic Foam
- BAABB3
≈ Angel Finger
Analog -30° +30°
- A5B4AC
Atlantic Foam
- ABB3A6
≈ Forever Green
- A2B4B3
≈ Marine Layer
Triadisch +120° +240°
- A5B4AC
Atlantic Foam
- ADAEBD
≈ Polar Mist
- BCACA6
≈ Mushroom
Geteilt komplementär +150° +210°
- A5B4AC
Atlantic Foam
- B4ACB9
≈ Audition
- BCABAC
≈ Relaxed Rhino
Tetradisch +90° +180° +270°
- A5B4AC
Atlantic Foam
- A7B1BD
≈ Grey Agate
- BAABB3
≈ Angel Finger
- B8AEA2
≈ Marshy Habitat
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.15:1 · APCA Lc 42
Ag
AAAAuf Schwarz
WCAG 9.72:1 · APCA Lc 60
Beste Textfarbe: #000000
WCAG 9.72:1 (AAA) · APCA Lc 60
Contrast pairs
Code-Snippets
CSS
:root {
--atlantic-foam: #a5b4ac;
--atlantic-foam-rgb: 165 180 172;
--atlantic-foam-oklch: oklch(0.756 0.02 162.8);
}
.element {
color: var(--atlantic-foam);
background-color: hsl(148 9% 68%);
border-color: oklch(0.756 0.02 162.8);
}Tailwind CSS v4
@theme {
--color-atlantic-foam: #a5b4ac;
--color-atlantic-foam-50: #f0f7f4;
--color-atlantic-foam-100: #e2eae6;
--color-atlantic-foam-200: #cdd7d2;
--color-atlantic-foam-300: #aebbb5;
--color-atlantic-foam-400: #94a29b;
--color-atlantic-foam-500: #7b8b82;
--color-atlantic-foam-600: #68756e;
--color-atlantic-foam-700: #535e58;
--color-atlantic-foam-800: #3d4540;
--color-atlantic-foam-900: #2a2f2c;
--color-atlantic-foam-950: #171c19;
}SCSS
$atlantic-foam: #a5b4ac;
$atlantic-foam-rgb: 165, 180, 172;
$atlantic-foam-light: mix(#fff, $atlantic-foam, 20%);
$atlantic-foam-dark: mix(#000, $atlantic-foam, 20%);
.element {
color: $atlantic-foam;
box-shadow: 0 0 0 2px rgba($atlantic-foam, 0.35);
}