色名 · #008BC4
Celebration Blue
Celebration Blueは#008BC4：rgb(0 139 196)、hsl(197 100% 38%)、oklch(0.603 0.13 236.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Blue mean? → · Celebration Blue color name →
#008BC4
oklch(0.603 0.13 236.4)
カラー変換
- HEX
- #008bc4
- RGB
- rgb(0 139 196)
- HSL
- hsl(197 100% 38%)
- HWB
- hwb(197 0% 23%)
- OKLCH
- oklch(0.603 0.13 236.4)
- OKLab
- oklab(0.603 -0.072 -0.109)
- CIE Lab
- lab(53.87 -16.26 -39.12)
- LCH
- lch(53.87 42.37 247.4)
- CMYK
- cmyk(100% 29% 0% 23%)
ティント · シェード · トーン
ティント
- 3697CA
- 52A2D1
- 6AAED7
- 81BADD
- 96C5E3
- ABD1E9
- C0DCEF
- D5E8F4
- EAF3FA
シェード
- 0078AA
- 006691
- 005478
- 004361
- 00324A
- 002335
- 001421
- 00070E
- 000102
トーン
- 268ABD
- 388AB7
- 4589B0
- 5088A9
- 5A87A3
- 62869C
- 6B8495
- 72838E
- 798287
カラーハーモニー
補色 +180°
- 008BC4
Celebration Blue
- BA6924
≈ Shutter Copper
類似色 -30° +30°
- 008BC4
Celebration Blue
- 00929F
≈ Jaded
- 5D7DCF
≈ Serenity’s Reign
トライアド +120° +240°
- 008BC4
Celebration Blue
- BC5C83
≈ Beauty Queen
- 7D8A18
≈ Krypton Green
スプリットコンプリメンタリー +150° +210°
- 008BC4
Celebration Blue
- C35E56
≈ Barbecue
- A17B00
≈ Hornet Yellow
テトラード +90° +180° +270°
- 008BC4
Celebration Blue
- A963AA
≈ Iris Orchid
- BA6924
≈ Shutter Copper
- 45954F
≈ Discover Deco
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.82:1 · APCA Lc 65
Ag
AA黒の上
WCAG 5.49:1 · APCA Lc 37
最適な文字色: #000000
WCAG 5.49:1 (AA) · APCA Lc 37
Contrast pairs
コードスニペット
CSS
:root {
--celebration-blue: #008bc4;
--celebration-blue-rgb: 0 139 196;
--celebration-blue-oklch: oklch(0.603 0.13 236.4);
}
.element {
color: var(--celebration-blue);
background-color: hsl(197 100% 38%);
border-color: oklch(0.603 0.13 236.4);
}Tailwind CSS v4
@theme {
--color-celebration-blue: #008bc4;
--color-celebration-blue-50: #d4fbff;
--color-celebration-blue-100: #c0efff;
--color-celebration-blue-200: #a0ddff;
--color-celebration-blue-300: #74c1f3;
--color-celebration-blue-400: #43a9e1;
--color-celebration-blue-500: #0091d0;
--color-celebration-blue-600: #007bb0;
--color-celebration-blue-700: #00628d;
--color-celebration-blue-800: #004968;
--color-celebration-blue-900: #003249;
--color-celebration-blue-950: #001e30;
}SCSS
$celebration-blue: #008bc4;
$celebration-blue-rgb: 0, 139, 196;
$celebration-blue-light: mix(#fff, $celebration-blue, 20%);
$celebration-blue-dark: mix(#000, $celebration-blue, 20%);
.element {
color: $celebration-blue;
box-shadow: 0 0 0 2px rgba($celebration-blue, 0.35);
}