色名 · #5E686D
Lava Grey
Lava Greyは#5E686D：rgb(94 104 109)、hsl(200 7% 40%)、oklch(0.51 0.015 229.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Lava Grey color name →
#5E686D
oklch(0.51 0.015 229.2)
カラー変換
- HEX
- #5e686d
- RGB
- rgb(94 104 109)
- HSL
- hsl(200 7% 40%)
- HWB
- hwb(200 37% 57%)
- OKLCH
- oklch(0.51 0.015 229.2)
- OKLab
- oklab(0.51 -0.01 -0.011)
- CIE Lab
- lab(43.27 -3.11 -4.2)
- LCH
- lch(43.27 5.22 233.4)
- CMYK
- cmyk(14% 5% 0% 57%)
ティント · シェード · トーン
ティント
- 6D767B
- 7C8488
- 8B9396
- 9BA1A5
- ABB0B3
- BBC0C2
- CCCFD1
- DDDFE0
- EEEFEF
シェード
- 51595E
- 444B4F
- 373E41
- 2B3033
- 1F2426
- 141819
- 0A0C0D
- 030404
- 000001
トーン
- 616A6F
- 656D71
- 686F73
- 6B7275
- 6F7476
- 727678
- 76797A
- 797B7C
- 7D7E7E
カラーハーモニー
補色 +180°
- 5E686D
Lava Grey
- 6E645F
≈ Folkstone
類似色 -30° +30°
- 5E686D
Lava Grey
- 5D6969
≈ Mountain Pass
- 61676F
≈ King Creek Falls
トライアド +120° +240°
- 5E686D
Lava Grey
- 6D6367
≈ Grape Grey
- 67675E
≈ Naturalism
スプリットコンプリメンタリー +150° +210°
- 5E686D
Lava Grey
- 6E6363
≈ Dignified Purple
- 6B655D
≈ Patio Stone
テトラード +90° +180° +270°
- 5E686D
Lava Grey
- 6A646C
≈ Alter Ego
- 6E645F
≈ Folkstone
- 626860
≈ Belmont Green
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 5.71:1 · APCA Lc 79
Ag
Fail黒の上
WCAG 3.67:1 · APCA Lc 23
最適な文字色: #FFFFFF
WCAG 5.71:1 (AA) · APCA Lc 79
Contrast pairs
コードスニペット
CSS
:root {
--lava-grey: #5e686d;
--lava-grey-rgb: 94 104 109;
--lava-grey-oklch: oklch(0.51 0.015 229.2);
}
.element {
color: var(--lava-grey);
background-color: hsl(200 7% 40%);
border-color: oklch(0.51 0.015 229.2);
}Tailwind CSS v4
@theme {
--color-lava-grey: #5e686d;
--color-lava-grey-50: #f1f6f9;
--color-lava-grey-100: #e3e9ec;
--color-lava-grey-200: #ced5d9;
--color-lava-grey-300: #b0b9be;
--color-lava-grey-400: #96a0a5;
--color-lava-grey-500: #7d888e;
--color-lava-grey-600: #6a7378;
--color-lava-grey-700: #545c60;
--color-lava-grey-800: #3d4346;
--color-lava-grey-900: #2a2f31;
--color-lava-grey-950: #181b1d;
}SCSS
$lava-grey: #5e686d;
$lava-grey-rgb: 94, 104, 109;
$lava-grey-light: mix(#fff, $lava-grey, 20%);
$lava-grey-dark: mix(#000, $lava-grey, 20%);
.element {
color: $lava-grey;
box-shadow: 0 0 0 2px rgba($lava-grey, 0.35);
}