最も近い色名 · #949BA4
#949BA4
最も近い色名: Grisaille
#949BA4（rgb(148 155 164)、hsl(214 8% 61%)、oklch(0.687 0.015 254.6)）に最も近い色名はGrisailleです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#949BA4
oklch(0.687 0.015 254.6)
カラー変換
- HEX
- #949ba4
- RGB
- rgb(148 155 164)
- HSL
- hsl(214 8% 61%)
- HWB
- hwb(214 58% 36%)
- OKLCH
- oklch(0.687 0.015 254.6)
- OKLab
- oklab(0.687 -0.004 -0.015)
- CIE Lab
- lab(63.62 -1.23 -5.64)
- LCH
- lch(63.62 5.77 257.7)
- CMYK
- cmyk(10% 5% 0% 36%)
ティント · シェード · トーン
ティント
- 9EA5AD
- A9AEB6
- B3B8BF
- BEC2C8
- C8CCD1
- D3D6DA
- DEE0E3
- E9EAEC
- F4F5F6
シェード
- 80868E
- 6D7279
- 5A5E64
- 484B50
- 36393D
- 26282B
- 16181A
- 08090A
- 010101
トーン
- 9298A0
- 90969D
- 8E9399
- 8C9095
- 8A8D92
- 888B8E
- 86888B
- 848587
- 828384
カラーハーモニー
補色 +180°
- 949BA4
Grisaille
- A09990
≈ Acier
類似色 -30° +30°
- 949BA4
Grisaille
- 919DA2
≈ Soft Pumice
- 9999A4
≈ Angry Gargoyle
トライアド +120° +240°
- 949BA4
Grisaille
- A49797
≈ Sunrise Over Tahiti
- 969D93
≈ Acacia Haze
スプリットコンプリメンタリー +150° +210°
- 949BA4
Grisaille
- A39893
≈ Gustav
- 9B9B90
≈ Hunter’s Hollow
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.80:1 · APCA Lc 54
Ag
AAA黒の上
WCAG 7.48:1 · APCA Lc 48
最適な文字色: #000000
WCAG 7.48:1 (AAA) · APCA Lc 48
Contrast pairs
コードスニペット
CSS
:root {
--grisaille: #949ba4;
--grisaille-rgb: 148 155 164;
--grisaille-oklch: oklch(0.687 0.015 254.6);
}
.element {
color: var(--grisaille);
background-color: hsl(214 8% 61%);
border-color: oklch(0.687 0.015 254.6);
}Tailwind CSS v4
@theme {
--color-grisaille: #949ba4;
--color-grisaille-50: #f2f5fa;
--color-grisaille-100: #e5e8ed;
--color-grisaille-200: #d0d5db;
--color-grisaille-300: #b2b8bf;
--color-grisaille-400: #989fa8;
--color-grisaille-500: #7f8791;
--color-grisaille-600: #6c727a;
--color-grisaille-700: #565b62;
--color-grisaille-800: #3f4348;
--color-grisaille-900: #2b2e32;
--color-grisaille-950: #181b1e;
}SCSS
$grisaille: #949ba4;
$grisaille-rgb: 148, 155, 164;
$grisaille-light: mix(#fff, $grisaille, 20%);
$grisaille-dark: mix(#000, $grisaille, 20%);
.element {
color: $grisaille;
box-shadow: 0 0 0 2px rgba($grisaille, 0.35);
}