色名 · #3CBCFC
Megaman
Megamanは#3CBCFC：rgb(60 188 252)、hsl(200 97% 61%)、oklch(0.754 0.142 235.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Blue mean? → · Megaman color name →
#3CBCFC
oklch(0.754 0.142 235.5)
カラー変換
- HEX
- #3cbcfc
- RGB
- rgb(60 188 252)
- HSL
- hsl(200 97% 61%)
- HWB
- hwb(200 24% 1%)
- OKLCH
- oklch(0.754 0.142 235.5)
- OKLab
- oklab(0.754 -0.08 -0.117)
- CIE Lab
- lab(71.53 -19.7 -42.36)
- LCH
- lch(71.53 46.72 245.1)
- CMYK
- cmyk(76% 25% 0% 1%)
ティント · シェード · トーン
ティント
- 59C3FD
- 70CAFE
- 84D1FE
- 97D8FF
- A9DFFF
- BBE5FF
- CCECFF
- DDF2FF
- EEF9FF
シェード
- 33A3DB
- 2A8BBB
- 21739C
- 195D7E
- 114762
- 0A3247
- 041F2D
- 010D16
- 000203
トーン
- 4AB6EF
- 55B0E3
- 5EABD6
- 65A5CA
- 6B9FBD
- 7199B1
- 7593A5
- 798D98
- 7D868C
カラーハーモニー
補色 +180°
- 3CBCFC
Megaman
- F3954E
≈ Toucan
類似色 -30° +30°
- 3CBCFC
Megaman
- 00C6D6
≈ Turquoise Surf
- 89ADFF
≈ Kitten’s Eye
トライアド +120° +240°
- 3CBCFC
Megaman
- F487B3
≈ Brown Knapweed
- ACBA43
≈ Hopscotch
スプリットコンプリメンタリー +150° +210°
- 3CBCFC
Megaman
- FC8980
≈ Coral Trails
- D8A72C
≈ Galliano
テトラード +90° +180° +270°
- 3CBCFC
Megaman
- DD8EE0
≈ Bright Lilac
- F3954E
≈ Toucan
- 70C776
≈ Snow Pea
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.14:1 · APCA Lc 42
Ag
AAA黒の上
WCAG 9.79:1 · APCA Lc 61
最適な文字色: #000000
WCAG 9.79:1 (AAA) · APCA Lc 61
Contrast pairs
コードスニペット
CSS
:root {
--megaman: #3cbcfc;
--megaman-rgb: 60 188 252;
--megaman-oklch: oklch(0.754 0.142 235.5);
}
.element {
color: var(--megaman);
background-color: hsl(200 97% 61%);
border-color: oklch(0.754 0.142 235.5);
}Tailwind CSS v4
@theme {
--color-megaman: #3cbcfc;
--color-megaman-50: #d0fcff;
--color-megaman-100: #bcf0ff;
--color-megaman-200: #99deff;
--color-megaman-300: #6bc2f7;
--color-megaman-400: #30aae6;
--color-megaman-500: #0092d6;
--color-megaman-600: #007bb4;
--color-megaman-700: #006391;
--color-megaman-800: #00496b;
--color-megaman-900: #00334b;
--color-megaman-950: #001e32;
}SCSS
$megaman: #3cbcfc;
$megaman-rgb: 60, 188, 252;
$megaman-light: mix(#fff, $megaman, 20%);
$megaman-dark: mix(#000, $megaman, 20%);
.element {
color: $megaman;
box-shadow: 0 0 0 2px rgba($megaman, 0.35);
}