色名 · #679BB3
Yacht Blue
Yacht Blueは#679BB3：rgb(103 155 179)、hsl(199 33% 55%)、oklch(0.662 0.066 228.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Cyan mean? → · Yacht Blue color name →
#679BB3
oklch(0.662 0.066 228.7)
カラー変換
- HEX
- #679bb3
- RGB
- rgb(103 155 179)
- HSL
- hsl(199 33% 55%)
- HWB
- hwb(199 40% 30%)
- OKLCH
- oklch(0.662 0.066 228.7)
- OKLab
- oklab(0.662 -0.043 -0.049)
- CIE Lab
- lab(61 -13.12 -18.31)
- LCH
- lch(61 22.53 234.4)
- CMYK
- cmyk(42% 13% 0% 30%)
ティント · シェード · トーン
ティント
- 76A5BB
- 85AFC2
- 94B8CA
- A3C2D1
- B3CCD9
- C2D6E0
- D1E0E8
- E0EBF0
- F0F5F7
シェード
- 59869B
- 4B7284
- 3D5E6E
- 304B58
- 233943
- 17282F
- 0C181D
- 04090C
- 000101
トーン
- 6A98AE
- 6D96A9
- 7093A4
- 73909F
- 758E99
- 788B94
- 7A888F
- 7C868A
- 7E8385
カラーハーモニー
補色 +180°
- 679BB3
Yacht Blue
- B5876F
≈ Red Gravel
類似色 -30° +30°
- 679BB3
Yacht Blue
- 609FA2
≈ Meadowbrook
- 7A94BB
≈ Ocean City
トライアド +120° +240°
- 679BB3
Yacht Blue
- B28399
≈ Heather Violet
- 969667
≈ Rhind Papyrus
スプリットコンプリメンタリー +150° +210°
- 679BB3
Yacht Blue
- B88383
≈ Bashful Rose
- A98E64
≈ Fossil Butte
テトラード +90° +180° +270°
- 679BB3
Yacht Blue
- A486AD
≈ Violet Eclipse
- B5876F
≈ Red Gravel
- 7F9D76
≈ Amulet
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.03:1 · APCA Lc 57
Ag
AA黒の上
WCAG 6.91:1 · APCA Lc 45
最適な文字色: #000000
WCAG 6.91:1 (AA) · APCA Lc 45
Contrast pairs
コードスニペット
CSS
:root {
--yacht-blue: #679bb3;
--yacht-blue-rgb: 103 155 179;
--yacht-blue-oklch: oklch(0.662 0.066 228.7);
}
.element {
color: var(--yacht-blue);
background-color: hsl(199 33% 55%);
border-color: oklch(0.662 0.066 228.7);
}Tailwind CSS v4
@theme {
--color-yacht-blue: #679bb3;
--color-yacht-blue-50: #e3f9ff;
--color-yacht-blue-100: #d3edfa;
--color-yacht-blue-200: #b9daec;
--color-yacht-blue-300: #96bed3;
--color-yacht-blue-400: #75a6be;
--color-yacht-blue-500: #558fa9;
--color-yacht-blue-600: #49798f;
--color-yacht-blue-700: #3a6172;
--color-yacht-blue-800: #284754;
--color-yacht-blue-900: #1b313b;
--color-yacht-blue-950: #0b1d25;
}SCSS
$yacht-blue: #679bb3;
$yacht-blue-rgb: 103, 155, 179;
$yacht-blue-light: mix(#fff, $yacht-blue, 20%);
$yacht-blue-dark: mix(#000, $yacht-blue, 20%);
.element {
color: $yacht-blue;
box-shadow: 0 0 0 2px rgba($yacht-blue, 0.35);
}