色名 · #76A0AF
Bosco Blue
Bosco Blueは#76A0AF：rgb(118 160 175)、hsl(196 26% 57%)、oklch(0.68 0.051 222)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Cyan mean? → · Bosco Blue color name →
#76A0AF
oklch(0.68 0.051 222)
カラー変換
- HEX
- #76a0af
- RGB
- rgb(118 160 175)
- HSL
- hsl(196 26% 57%)
- HWB
- hwb(196 46% 31%)
- OKLCH
- oklch(0.68 0.051 222)
- OKLab
- oklab(0.68 -0.038 -0.034)
- CIE Lab
- lab(63.2 -11.99 -12.68)
- LCH
- lch(63.2 17.45 226.6)
- CMYK
- cmyk(33% 9% 0% 31%)
ティント · シェード · トーン
ティント
- 83A9B7
- 91B3BF
- 9EBCC7
- ACC5CF
- BACFD7
- C7D8DF
- D5E2E7
- E3ECEF
- F1F5F7
シェード
- 668B98
- 567681
- 47616B
- 384E56
- 293B41
- 1C292E
- 0F191C
- 05090B
- 010101
トーン
- 779DAA
- 799AA5
- 7A96A1
- 7B939C
- 7C9097
- 7D8D93
- 7E8A8E
- 7F8689
- 7F8385
カラーハーモニー
補色 +180°
- 76A0AF
Bosco Blue
- B48F80
≈ Coyote Tracks
類似色 -30° +30°
- 76A0AF
Bosco Blue
- 74A3A0
≈ Catalina
- 829BB7
≈ Sailing
トライアド +120° +240°
- 76A0AF
Bosco Blue
- AF8DA1
≈ Palisade Orchid
- 9E9A76
≈ A Frond in Need
スプリットコンプリメンタリー +150° +210°
- 76A0AF
Bosco Blue
- B58C90
≈ Shabby Chic
- AC9476
≈ River Oak
テトラード +90° +180° +270°
- 76A0AF
Bosco Blue
- A390B0
≈ Revered
- B48F80
≈ Coyote Tracks
- 8D9F7F
≈ Mistletoe
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.83:1 · APCA Lc 54
Ag
AAA黒の上
WCAG 7.41:1 · APCA Lc 48
最適な文字色: #000000
WCAG 7.41:1 (AAA) · APCA Lc 48
Contrast pairs
コードスニペット
CSS
:root {
--bosco-blue: #76a0af;
--bosco-blue-rgb: 118 160 175;
--bosco-blue-oklch: oklch(0.68 0.051 222);
}
.element {
color: var(--bosco-blue);
background-color: hsl(196 26% 57%);
border-color: oklch(0.68 0.051 222);
}Tailwind CSS v4
@theme {
--color-bosco-blue: #76a0af;
--color-bosco-blue-50: #e7f9ff;
--color-bosco-blue-100: #d7ecf5;
--color-bosco-blue-200: #bed9e4;
--color-bosco-blue-300: #9cbecb;
--color-bosco-blue-400: #7ea6b4;
--color-bosco-blue-500: #608e9e;
--color-bosco-blue-600: #527886;
--color-bosco-blue-700: #41606b;
--color-bosco-blue-800: #2e474f;
--color-bosco-blue-900: #1f3137;
--color-bosco-blue-950: #0f1d22;
}SCSS
$bosco-blue: #76a0af;
$bosco-blue-rgb: 118, 160, 175;
$bosco-blue-light: mix(#fff, $bosco-blue, 20%);
$bosco-blue-dark: mix(#000, $bosco-blue, 20%);
.element {
color: $bosco-blue;
box-shadow: 0 0 0 2px rgba($bosco-blue, 0.35);
}