色名 · #308EA0
Scooter
Scooterは#308EA0：rgb(48 142 160)、hsl(190 54% 41%)、oklch(0.6 0.09 213)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Cyan mean? → · Scooter color name →
#308EA0
oklch(0.6 0.09 213)
カラー変換
- HEX
- #308ea0
- RGB
- rgb(48 142 160)
- HSL
- hsl(190 54% 41%)
- HWB
- hwb(190 19% 37%)
- OKLCH
- oklch(0.6 0.09 213)
- OKLab
- oklab(0.6 -0.075 -0.049)
- CIE Lab
- lab(54.22 -23.76 -18.05)
- LCH
- lch(54.22 29.84 217.2)
- CMYK
- cmyk(70% 11% 0% 37%)
ティント · シェード · トーン
ティント
- 4A99A9
- 61A4B3
- 76AFBC
- 8ABBC6
- 9DC6CF
- B1D1D9
- C4DDE2
- D8E8EC
- EBF3F5
シェード
- 287B8B
- 216876
- 1A5661
- 13444E
- 0C343B
- 062429
- 031519
- 010709
- 000101
トーン
- 3D8D9D
- 488C9A
- 518A97
- 598993
- 618890
- 68868D
- 6E858A
- 758387
- 7A8283
カラーハーモニー
補色 +180°
- 308EA0
Scooter
- AF6C5D
≈ Bantam Egg
類似色 -30° +30°
- 308EA0
Scooter
- 339285
≈ Highlands
- 4D86B2
≈ Ship’s Harbour
トライアド +120° +240°
- 308EA0
Scooter
- A06C97
≈ Flowering Raspberry
- 937F3C
≈ Cardueline Finch
スプリットコンプリメンタリー +150° +210°
- 308EA0
Scooter
- AD697B
≈ Refined Rose
- A67445
≈ Muskelmannbraun
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.81:1 · APCA Lc 65
Ag
AA黒の上
WCAG 5.50:1 · APCA Lc 36
最適な文字色: #000000
WCAG 5.50:1 (AA) · APCA Lc 36
Contrast pairs
コードスニペット
CSS
:root {
--scooter: #308ea0;
--scooter-rgb: 48 142 160;
--scooter-oklch: oklch(0.6 0.09 213);
}
.element {
color: var(--scooter);
background-color: hsl(190 54% 41%);
border-color: oklch(0.6 0.09 213);
}Tailwind CSS v4
@theme {
--color-scooter: #308ea0;
--color-scooter-50: #d9fcff;
--color-scooter-100: #c7f0fb;
--color-scooter-200: #a9dfec;
--color-scooter-300: #81c4d4;
--color-scooter-400: #59acbe;
--color-scooter-500: #2795a9;
--color-scooter-600: #247e8f;
--color-scooter-700: #1d6573;
--color-scooter-800: #124b54;
--color-scooter-900: #0c343a;
--color-scooter-950: #001f25;
}SCSS
$scooter: #308ea0;
$scooter-rgb: 48, 142, 160;
$scooter-light: mix(#fff, $scooter, 20%);
$scooter-dark: mix(#000, $scooter, 20%);
.element {
color: $scooter;
box-shadow: 0 0 0 2px rgba($scooter, 0.35);
}