最も近い色名 · #31A6D4
#31A6D4
最も近い色名: Mystic Blue
#31A6D4（rgb(49 166 212)、hsl(197 65% 51%)、oklch(0.682 0.12 229.4)）に最も近い色名はMystic Blueです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#31A6D4
oklch(0.682 0.12 229.4)
カラー変換
- HEX
- #31a6d4
- RGB
- rgb(49 166 212)
- HSL
- hsl(197 65% 51%)
- HWB
- hwb(197 19% 17%)
- OKLCH
- oklch(0.682 0.12 229.4)
- OKLab
- oklab(0.682 -0.078 -0.091)
- CIE Lab
- lab(63.35 -21.33 -33.28)
- LCH
- lch(63.35 39.53 237.3)
- CMYK
- cmyk(77% 22% 0% 17%)
ティント · シェード · トーン
ティント
- 4FAFD9
- 66B8DD
- 7BC1E2
- 8FCAE6
- A3D3EB
- B5DCEF
- C8E5F3
- DAEDF7
- EDF6FB
シェード
- 2990B8
- 227A9D
- 1A6583
- 135169
- 0C3E51
- 062B3A
- 031A24
- 010A10
- 000102
トーン
- 40A2CC
- 4C9FC3
- 569BBB
- 5E98B2
- 6594AA
- 6C90A2
- 728C99
- 778891
- 7C8488
カラーハーモニー
補色 +180°
- 31A6D4
Mystic Blue
- D48152
≈ Copper Harbor
類似色 -30° +30°
- 31A6D4
Mystic Blue
- 00AEB4
≈ Larkspur Blue
- 6B99E3
≈ Little Boy Blue
トライアド +120° +240°
- 31A6D4
Mystic Blue
- CF78A4
≈ Heartbreaker
- 9E9F3C
≈ Poplar
スプリットコンプリメンタリー +150° +210°
- 31A6D4
Mystic Blue
- D9787A
≈ Juicy Details
- C08F34
≈ Arnica
テトラード +90° +180° +270°
- 31A6D4
Mystic Blue
- B980C7
≈ Lavender Sweater
- D48152
≈ Copper Harbor
- 70AB61
≈ Ferntastic
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.78:1 · APCA Lc 53
Ag
AAA黒の上
WCAG 7.53:1 · APCA Lc 49
最適な文字色: #000000
WCAG 7.53:1 (AAA) · APCA Lc 49
Contrast pairs
コードスニペット
CSS
:root {
--mystic-blue: #31a6d4;
--mystic-blue-rgb: 49 166 212;
--mystic-blue-oklch: oklch(0.682 0.12 229.4);
}
.element {
color: var(--mystic-blue);
background-color: hsl(197 65% 51%);
border-color: oklch(0.682 0.12 229.4);
}Tailwind CSS v4
@theme {
--color-mystic-blue: #31a6d4;
--color-mystic-blue-50: #d4fcff;
--color-mystic-blue-100: #c0f0ff;
--color-mystic-blue-200: #9fdeff;
--color-mystic-blue-300: #73c3ea;
--color-mystic-blue-400: #42abd7;
--color-mystic-blue-500: #0093c5;
--color-mystic-blue-600: #007da7;
--color-mystic-blue-700: #006486;
--color-mystic-blue-800: #004a63;
--color-mystic-blue-900: #003345;
--color-mystic-blue-950: #001f2d;
}SCSS
$mystic-blue: #31a6d4;
$mystic-blue-rgb: 49, 166, 212;
$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);
}