最も近い色名 · #4FA4CB
#4FA4CB
最も近い色名: Mystic Blue
#4FA4CB（rgb(79 164 203)、hsl(199 54% 55%)、oklch(0.682 0.1 230.5)）に最も近い色名はMystic Blueです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#4FA4CB
oklch(0.682 0.1 230.5)
カラー変換
- HEX
- #4fa4cb
- RGB
- rgb(79 164 203)
- HSL
- hsl(199 54% 55%)
- HWB
- hwb(199 31% 20%)
- OKLCH
- oklch(0.682 0.1 230.5)
- OKLab
- oklab(0.682 -0.064 -0.077)
- CIE Lab
- lab(63.32 -17.84 -28.27)
- LCH
- lch(63.32 33.43 237.7)
- CMYK
- cmyk(61% 19% 0% 20%)
ティント · シェード · トーン
ティント
- 63ADD0
- 76B6D6
- 88BFDB
- 99C8E0
- AAD2E6
- BBDBEB
- CCE4F0
- DDEDF5
- EEF6FA
シェード
- 448EB0
- 387996
- 2E647D
- 235065
- 193D4D
- 102B37
- 071A22
- 020A0F
- 000102
トーン
- 57A1C3
- 5D9DBC
- 639AB4
- 6896AD
- 6D93A5
- 728F9E
- 768B96
- 79888F
- 7D8488
カラーハーモニー
補色 +180°
- 4FA4CB
Mystic Blue
- CA865F
≈ Wheatberry
類似色 -30° +30°
- 4FA4CB
Mystic Blue
- 39ABB2
≈ Tempo
- 7599D7
≈ Sea Loch
トライアド +120° +240°
- 4FA4CB
Mystic Blue
- C87FA1
≈ Moonlight Mauve
- 9C9F52
≈ Lazy Lizard
スプリットコンプリメンタリー +150° +210°
- 4FA4CB
Mystic Blue
- CF7F7E
≈ Raspberry Ripple
- B9924C
≈ Alluvial Inca
テトラード +90° +180° +270°
- 4FA4CB
Mystic Blue
- B584BF
≈ Lavender Sweater
- CA865F
≈ Wheatberry
- 76A86D
≈ Happy Cricket
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.79:1 · APCA Lc 54
Ag
AAA黒の上
WCAG 7.50:1 · APCA Lc 48
最適な文字色: #000000
WCAG 7.50:1 (AAA) · APCA Lc 48
Contrast pairs
コードスニペット
CSS
:root {
--mystic-blue: #4fa4cb;
--mystic-blue-rgb: 79 164 203;
--mystic-blue-oklch: oklch(0.682 0.1 230.5);
}
.element {
color: var(--mystic-blue);
background-color: hsl(199 54% 55%);
border-color: oklch(0.682 0.1 230.5);
}Tailwind CSS v4
@theme {
--color-mystic-blue: #4fa4cb;
--color-mystic-blue-50: #dafbff;
--color-mystic-blue-100: #c8efff;
--color-mystic-blue-200: #aadcf8;
--color-mystic-blue-300: #82c1e2;
--color-mystic-blue-400: #5aa9ce;
--color-mystic-blue-500: #2c92bc;
--color-mystic-blue-600: #287b9f;
--color-mystic-blue-700: #20637f;
--color-mystic-blue-800: #13495e;
--color-mystic-blue-900: #0c3242;
--color-mystic-blue-950: #001e2a;
}SCSS
$mystic-blue: #4fa4cb;
$mystic-blue-rgb: 79, 164, 203;
$mystic-blue-light: mix(#fff, $mystic-blue, 20%);
$mystic-blue-dark: mix(#000, $mystic-blue, 20%);
.element {
color: $mystic-blue;
box-shadow: 0 0 0 2px rgba($mystic-blue, 0.35);
}