色名 · #869CBB
Sailing
Sailingは#869CBB：rgb(134 156 187)、hsl(215 28% 63%)、oklch(0.687 0.052 257)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Blue mean? → · Sailing color name →
#869CBB
oklch(0.687 0.052 257)
カラー変換
- HEX
- #869cbb
- RGB
- rgb(134 156 187)
- HSL
- hsl(215 28% 63%)
- HWB
- hwb(215 53% 27%)
- OKLCH
- oklch(0.687 0.052 257)
- OKLab
- oklab(0.687 -0.012 -0.051)
- CIE Lab
- lab(63.47 -2.57 -18.84)
- LCH
- lch(63.47 19.02 262.2)
- CMYK
- cmyk(28% 17% 0% 27%)
ティント · シェード · トーン
ティント
- 92A6C2
- 9DAFC9
- A9B9CF
- B5C3D6
- C1CDDD
- CDD7E4
- D9E1EB
- E6EBF1
- F2F5F8
シェード
- 7487A2
- 62738A
- 515F73
- 404C5C
- 303946
- 212832
- 13181F
- 06090D
- 010102
トーン
- 8599B5
- 8596AF
- 8494A9
- 8491A3
- 838E9D
- 838B97
- 828892
- 81868C
- 818386
カラーハーモニー
補色 +180°
- 869CBB
Sailing
- AD9776
≈ Croque Monsieur
類似色 -30° +30°
- 869CBB
Sailing
- 78A1B4
≈ Grey Blue
- 9896BA
≈ Thistle Down
トライアド +120° +240°
- 869CBB
Sailing
- B98E8F
≈ Rose Brown
- 8BA283
≈ Mistletoe
スプリットコンプリメンタリー +150° +210°
- 869CBB
Sailing
- B6917F
≈ Changing Seasons
- 9E9D78
≈ Curly Grass
テトラード +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 {
--sailing: #869cbb;
--sailing-rgb: 134 156 187;
--sailing-oklch: oklch(0.687 0.052 257);
}
.element {
color: var(--sailing);
background-color: hsl(215 28% 63%);
border-color: oklch(0.687 0.052 257);
}Tailwind CSS v4
@theme {
--color-sailing: #869cbb;
--color-sailing-50: #ecf6ff;
--color-sailing-100: #dee9fa;
--color-sailing-200: #c7d5eb;
--color-sailing-300: #a8b9d3;
--color-sailing-400: #8ba0be;
--color-sailing-500: #7088a9;
--color-sailing-600: #5f738f;
--color-sailing-700: #4c5c72;
--color-sailing-800: #364354;
--color-sailing-900: #252f3b;
--color-sailing-950: #141b25;
}SCSS
$sailing: #869cbb;
$sailing-rgb: 134, 156, 187;
$sailing-light: mix(#fff, $sailing, 20%);
$sailing-dark: mix(#000, $sailing, 20%);
.element {
color: $sailing;
box-shadow: 0 0 0 2px rgba($sailing, 0.35);
}