色名 · #ABAFAE
Grey Mirage
Grey Mirageは#ABAFAE：rgb(171 175 174)、hsl(165 2% 68%)、oklch(0.751 0.005 179.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Grey Mirage color name →
#ABAFAE
oklch(0.751 0.005 179.7)
カラー変換
- HEX
- #abafae
- RGB
- rgb(171 175 174)
- HSL
- hsl(165 2% 68%)
- HWB
- hwb(165 67% 31%)
- OKLCH
- oklch(0.751 0.005 179.7)
- OKLab
- oklab(0.751 -0.005 0)
- CIE Lab
- lab(71.12 -1.6 -0.01)
- LCH
- lch(71.12 1.6 180.2)
- CMYK
- cmyk(2% 0% 1% 31%)
ティント · シェード · トーン
ティント
- B3B7B6
- BBBFBE
- C4C6C6
- CCCECE
- D4D6D6
- DDDEDE
- E5E6E6
- EEEFEE
- F6F7F7
シェード
- 949897
- 7E8180
- 686B6A
- 545655
- 404141
- 2D2E2E
- 1B1C1C
- 0B0B0B
- 010101
トーン
- A7AAA9
- A2A5A5
- 9EA1A0
- 9A9C9B
- 959797
- 919292
- 8D8E8E
- 888989
- 848584
カラーハーモニー
補色 +180°
- ABAFAE
Grey Mirage
- B1ADAE
≈ Industrial Age
類似色 -30° +30°
- ABAFAE
Grey Mirage
- ACAFAC
≈ Mineral Deposit
- ABAFB0
≈ Grey Mirage
トライアド +120° +240°
- ABAFAE
Grey Mirage
- AEADB1
≈ Grey Timberwolf
- B0ADAB
≈ Industrial Age
スプリットコンプリメンタリー +150° +210°
- ABAFAE
Grey Mirage
- B0ADAF
≈ Industrial Age
- B1ADAC
≈ Smoky Wings
テトラード +90° +180° +270°
- ABAFAE
Grey Mirage
- ADAEB1
≈ Grey Timberwolf
- B1ADAE
≈ Industrial Age
- AFAEAB
≈ Industrial Age
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.21:1 · APCA Lc 44
Ag
AAA黒の上
WCAG 9.47:1 · APCA Lc 58
最適な文字色: #000000
WCAG 9.47:1 (AAA) · APCA Lc 58
Contrast pairs
コードスニペット
CSS
:root {
--grey-mirage: #abafae;
--grey-mirage-rgb: 171 175 174;
--grey-mirage-oklch: oklch(0.751 0.005 179.7);
}
.element {
color: var(--grey-mirage);
background-color: hsl(165 2% 68%);
border-color: oklch(0.751 0.005 179.7);
}Tailwind CSS v4
@theme {
--color-grey-mirage: #abafae;
--color-grey-mirage-50: #f4f5f5;
--color-grey-mirage-100: #e6e8e8;
--color-grey-mirage-200: #d2d5d4;
--color-grey-mirage-300: #b5b8b7;
--color-grey-mirage-400: #9c9f9e;
--color-grey-mirage-500: #838786;
--color-grey-mirage-600: #6f7271;
--color-grey-mirage-700: #595b5b;
--color-grey-mirage-800: #414342;
--color-grey-mirage-900: #2d2e2e;
--color-grey-mirage-950: #1a1b1b;
}SCSS
$grey-mirage: #abafae;
$grey-mirage-rgb: 171, 175, 174;
$grey-mirage-light: mix(#fff, $grey-mirage, 20%);
$grey-mirage-dark: mix(#000, $grey-mirage, 20%);
.element {
color: $grey-mirage;
box-shadow: 0 0 0 2px rgba($grey-mirage, 0.35);
}