色名 · #A5B2AA
Marine Grey
Marine Greyは#A5B2AA：rgb(165 178 170)、hsl(143 8% 67%)、oklch(0.751 0.018 159)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Marine Grey color name →
#A5B2AA
oklch(0.751 0.018 159)
カラー変換
- HEX
- #a5b2aa
- RGB
- rgb(165 178 170)
- HSL
- hsl(143 8% 67%)
- HWB
- hwb(143 65% 30%)
- OKLCH
- oklch(0.751 0.018 159)
- OKLab
- oklab(0.751 -0.017 0.007)
- CIE Lab
- lab(71.37 -5.86 2.46)
- LCH
- lch(71.37 6.35 157.2)
- CMYK
- cmyk(7% 0% 4% 30%)
ティント · シェード · トーン
ティント
- AEB9B2
- B6C1BA
- BFC9C3
- C8D0CB
- D1D8D4
- DAE0DC
- E3E7E5
- ECEFEE
- F6F7F6
シェード
- 8F9A93
- 79837D
- 656D68
- 515753
- 3D433F
- 2B2F2D
- 1A1D1B
- 0A0C0B
- 010101
トーン
- A1ADA6
- 9EA8A1
- 9AA39D
- 969E99
- 929995
- 8F9491
- 8B8F8C
- 878A88
- 848584
カラーハーモニー
補色 +180°
- A5B2AA
Marine Grey
- B7AAB2
≈ Lavender Cloud
類似色 -30° +30°
- A5B2AA
Marine Grey
- ABB1A5
≈ Pebble Walk
- A2B2B0
≈ Conch
トライアド +120° +240°
- A5B2AA
Marine Grey
- ABADBA
≈ Eclectic
- B9ABA6
≈ Embarrassed Shadow
スプリットコンプリメンタリー +150° +210°
- A5B2AA
Marine Grey
- B2ABB7
≈ Chatelle
- B9AAAC
≈ Aniline Mauve
テトラード +90° +180° +270°
- A5B2AA
Marine Grey
- A6B0BA
≈ Berry Chalk
- B7AAB2
≈ Lavender Cloud
- B6ACA2
≈ Perfect Taupe
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.19:1 · APCA Lc 43
Ag
AAA黒の上
WCAG 9.54:1 · APCA Lc 59
最適な文字色: #000000
WCAG 9.54:1 (AAA) · APCA Lc 59
Contrast pairs
コードスニペット
CSS
:root {
--marine-grey: #a5b2aa;
--marine-grey-rgb: 165 178 170;
--marine-grey-oklch: oklch(0.751 0.018 159);
}
.element {
color: var(--marine-grey);
background-color: hsl(143 8% 67%);
border-color: oklch(0.751 0.018 159);
}Tailwind CSS v4
@theme {
--color-marine-grey: #a5b2aa;
--color-marine-grey-50: #f1f7f3;
--color-marine-grey-100: #e3eae6;
--color-marine-grey-200: #ced7d2;
--color-marine-grey-300: #b0bab4;
--color-marine-grey-400: #96a29a;
--color-marine-grey-500: #7c8a82;
--color-marine-grey-600: #69756e;
--color-marine-grey-700: #545d58;
--color-marine-grey-800: #3d4440;
--color-marine-grey-900: #2a2f2c;
--color-marine-grey-950: #181c19;
}SCSS
$marine-grey: #a5b2aa;
$marine-grey-rgb: 165, 178, 170;
$marine-grey-light: mix(#fff, $marine-grey, 20%);
$marine-grey-dark: mix(#000, $marine-grey, 20%);
.element {
color: $marine-grey;
box-shadow: 0 0 0 2px rgba($marine-grey, 0.35);
}