Màu có tên · #A5B4AC
Atlantic Foam
Atlantic Foam là #A5B4AC: rgb(165 180 172), hsl(148 9% 68%), oklch(0.756 0.02 162.8). Xem sắc nhạt, sắc đậm, hòa sắc, tương phản WCAG và APCA, cùng mã CSS, Tailwind v4 và SCSS.
What does Gray mean? → · Atlantic Foam color name →
#A5B4AC
oklch(0.756 0.02 162.8)
Chuyển đổi màu
- 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%)
Sắc nhạt · Sắc đậm · Sắc xám
Sắc nhạt
- AEBBB4
- B6C3BC
- BFCAC4
- C8D1CC
- D1D9D5
- DAE0DD
- E3E8E5
- EDF0EE
- F6F7F6
Sắc đậm
- 8F9C95
- 79857F
- 656E69
- 515854
- 3D4440
- 2B302D
- 1A1D1B
- 0A0C0B
- 010201
Sắc xám
- A1AFA7
- 9EA9A3
- 9AA49F
- 969F9A
- 929A96
- 8F9491
- 8B8F8D
- 878A89
- 848584
Hòa sắc
Bổ túc +180°
- A5B4AC
Atlantic Foam
- BAABB3
≈ Angel Finger
Tương đồng -30° +30°
- A5B4AC
Atlantic Foam
- ABB3A6
≈ Forever Green
- A2B4B3
≈ Marine Layer
Bộ ba +120° +240°
- A5B4AC
Atlantic Foam
- ADAEBD
≈ Polar Mist
- BCACA6
≈ Mushroom
Bổ túc chia +150° +210°
- A5B4AC
Atlantic Foam
- B4ACB9
≈ Audition
- BCABAC
≈ Relaxed Rhino
Bộ bốn +90° +180° +270°
- A5B4AC
Atlantic Foam
- A7B1BD
≈ Grey Agate
- BAABB3
≈ Angel Finger
- B8AEA2
≈ Marshy Habitat
Tương phản và khả năng tiếp cận
Ag
FailTrên nền trắng
WCAG 2.15:1 · APCA Lc 42
Ag
AAATrên nền đen
WCAG 9.72:1 · APCA Lc 60
Màu chữ tốt nhất: #000000
WCAG 9.72:1 (AAA) · APCA Lc 60
Contrast pairs
Đoạn mã
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);
}