色名 · #545B62
Titanium Grey
Titanium Greyは#545B62：rgb(84 91 98)、hsl(210 8% 36%)、oklch(0.468 0.014 248.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Titanium Grey color name →
#545B62
oklch(0.468 0.014 248.1)
カラー変換
- HEX
- #545b62
- RGB
- rgb(84 91 98)
- HSL
- hsl(210 8% 36%)
- HWB
- hwb(210 33% 62%)
- OKLCH
- oklch(0.468 0.014 248.1)
- OKLab
- oklab(0.468 -0.005 -0.013)
- CIE Lab
- lab(38.22 -1.64 -5.03)
- LCH
- lch(38.22 5.29 252)
- CMYK
- cmyk(14% 7% 0% 62%)
ティント · シェード · トーン
ティント
- 636A70
- 73797F
- 84898E
- 94999E
- A5A9AD
- B7BABD
- C8CBCD
- DADCDE
- EDEDEE
シェード
- 484E54
- 3C4147
- 31353A
- 26292D
- 1B1E21
- 111316
- 08090B
- 020303
- 000000
トーン
- 585F65
- 5D6268
- 61666B
- 656A6E
- 6A6D71
- 6E7174
- 737577
- 77787A
- 7B7C7D
カラーハーモニー
補色 +180°
- 545B62
Titanium Grey
- 605952
≈ Metropolis
類似色 -30° +30°
- 545B62
Titanium Grey
- 525C60
≈ City Rain
- 585962
≈ Midnight Badger
トライアド +120° +240°
- 545B62
Titanium Grey
- 625758
≈ Rix
- 585C53
≈ Pointed Fir
スプリットコンプリメンタリー +150° +210°
- 545B62
Titanium Grey
- 625854
≈ Pure Zeal
- 5C5A51
≈ Stormvermin Fur
テトラード +90° +180° +270°
- 545B62
Titanium Grey
- 60575D
≈ Rabbit
- 605952
≈ Metropolis
- 545D57
≈ Evergreen Bough
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 6.88:1 · APCA Lc 84
Ag
Fail黒の上
WCAG 3.04:1 · APCA Lc 18
最適な文字色: #FFFFFF
WCAG 6.88:1 (AA) · APCA Lc 84
Contrast pairs
コードスニペット
CSS
:root {
--titanium-grey: #545b62;
--titanium-grey-rgb: 84 91 98;
--titanium-grey-oklch: oklch(0.468 0.014 248.1);
}
.element {
color: var(--titanium-grey);
background-color: hsl(210 8% 36%);
border-color: oklch(0.468 0.014 248.1);
}Tailwind CSS v4
@theme {
--color-titanium-grey: #545b62;
--color-titanium-grey-50: #f2f5f9;
--color-titanium-grey-100: #e4e8ed;
--color-titanium-grey-200: #d0d5da;
--color-titanium-grey-300: #b2b8bf;
--color-titanium-grey-400: #989fa7;
--color-titanium-grey-500: #7f878f;
--color-titanium-grey-600: #6c7279;
--color-titanium-grey-700: #565c61;
--color-titanium-grey-800: #3e4347;
--color-titanium-grey-900: #2b2e31;
--color-titanium-grey-950: #181b1d;
}SCSS
$titanium-grey: #545b62;
$titanium-grey-rgb: 84, 91, 98;
$titanium-grey-light: mix(#fff, $titanium-grey, 20%);
$titanium-grey-dark: mix(#000, $titanium-grey, 20%);
.element {
color: $titanium-grey;
box-shadow: 0 0 0 2px rgba($titanium-grey, 0.35);
}