色名 · #606788
Champion Blue
Champion Blueは#606788：rgb(96 103 136)、hsl(229 17% 45%)、oklch(0.521 0.053 275.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Blue mean? → · Champion Blue color name →
#606788
oklch(0.521 0.053 275.1)
カラー変換
- HEX
- #606788
- RGB
- rgb(96 103 136)
- HSL
- hsl(229 17% 45%)
- HWB
- hwb(229 38% 47%)
- OKLCH
- oklch(0.521 0.053 275.1)
- OKLab
- oklab(0.521 0.005 -0.053)
- CIE Lab
- lab(43.97 3.33 -19.32)
- LCH
- lch(43.97 19.6 279.8)
- CMYK
- cmyk(29% 24% 0% 47%)
ティント · シェード · トーン
ティント
- 6F7594
- 7D849F
- 8D92AB
- 9CA1B7
- ACB0C2
- BCC0CE
- CCCFDA
- DDDFE7
- EEEFF3
シェード
- 525975
- 454B63
- 383D52
- 2C3041
- 202331
- 151722
- 0A0C13
- 030406
- 000001
トーン
- 636A87
- 666C87
- 696F86
- 6D7185
- 707485
- 737684
- 767983
- 797B82
- 7D7E81
カラーハーモニー
補色 +180°
- 606788
Champion Blue
- 726946
≈ Austere
類似色 -30° +30°
- 606788
Champion Blue
- 4F6D86
≈ Oceanic
- 706282
≈ Posy Purple
トライアド +120° +240°
- 606788
Champion Blue
- 855E54
≈ Hanover Brick
- 50725C
≈ Green Valley
スプリットコンプリメンタリー +150° +210°
- 606788
Champion Blue
- 7F6349
≈ Bonnie’s Bench
- 626F4D
≈ Greenfield
テトラード +90° +180° +270°
- 606788
Champion Blue
- 845D65
≈ Rose Garland
- 726946
≈ Austere
- 44736D
≈ Sinkhole
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 5.53:1 · APCA Lc 78
Ag
Fail黒の上
WCAG 3.79:1 · APCA Lc 24
最適な文字色: #FFFFFF
WCAG 5.53:1 (AA) · APCA Lc 78
Contrast pairs
コードスニペット
CSS
:root {
--champion-blue: #606788;
--champion-blue-rgb: 96 103 136;
--champion-blue-oklch: oklch(0.521 0.053 275.1);
}
.element {
color: var(--champion-blue);
background-color: hsl(229 17% 45%);
border-color: oklch(0.521 0.053 275.1);
}Tailwind CSS v4
@theme {
--color-champion-blue: #606788;
--color-champion-blue-50: #f1f4ff;
--color-champion-blue-100: #e3e7fa;
--color-champion-blue-200: #ced3eb;
--color-champion-blue-300: #b0b5d3;
--color-champion-blue-400: #959dbe;
--color-champion-blue-500: #7c84aa;
--color-champion-blue-600: #69708f;
--color-champion-blue-700: #545973;
--color-champion-blue-800: #3c4155;
--color-champion-blue-900: #292d3b;
--color-champion-blue-950: #171a25;
}SCSS
$champion-blue: #606788;
$champion-blue-rgb: 96, 103, 136;
$champion-blue-light: mix(#fff, $champion-blue, 20%);
$champion-blue-dark: mix(#000, $champion-blue, 20%);
.element {
color: $champion-blue;
box-shadow: 0 0 0 2px rgba($champion-blue, 0.35);
}