色名 · #EE3333
Sparkling Red
Sparkling Redは#EE3333：rgb(238 51 51)、hsl(0 85% 57%)、oklch(0.619 0.222 26.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Sparkling Red color name →
#EE3333
oklch(0.619 0.222 26.7)
カラー変換
- HEX
- #ee3333
- RGB
- rgb(238 51 51)
- HSL
- hsl(0 85% 57%)
- HWB
- hwb(0 20% 7%)
- OKLCH
- oklch(0.619 0.222 26.7)
- OKLab
- oklab(0.619 0.198 0.1)
- CIE Lab
- lab(53.6 69.88 47.83)
- LCH
- lch(53.6 84.68 34.4)
- CMYK
- cmyk(0% 79% 79% 7%)
ティント · シェード · トーン
ティント
- F3514A
- F7695F
- FB7E73
- FE9187
- FFA59A
- FFB7AE
- FFC9C2
- FFDBD6
- FFEDEB
シェード
- CF2B2B
- B12323
- 931C1C
- 771414
- 5C0D0D
- 420707
- 2A0303
- 140101
- 030000
トーン
- E5433E
- DB4E47
- D1584F
- C76057
- BC675F
- B26D66
- A6736D
- 9A7873
- 8E7C7A
カラーハーモニー
補色 +180°
- EE3333
Sparkling Red
- 0097A6
≈ Tile Blue
類似色 -30° +30°
- EE3333
Sparkling Red
- E43289
≈ Mystic Magenta
- C76900
≈ Sludge
トライアド +120° +240°
- EE3333
Sparkling Red
- 00A238
≈ Poetic Green
- 4D79FF
≈ Lightish Blue
スプリットコンプリメンタリー +150° +210°
- EE3333
Sparkling Red
- 009C84
≈ Reptilian Green
- 0090CC
≈ Rich Electric Blue
テトラード +90° +180° +270°
- EE3333
Sparkling Red
- 819000
≈ Foggy Bog
- 0097A6
≈ Tile Blue
- 975CF8
≈ Forgotten Kyawthuite
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 4.07:1 · APCA Lc 66
Ag
AA黒の上
WCAG 5.15:1 · APCA Lc 35
最適な文字色: #000000
WCAG 5.15:1 (AA) · APCA Lc 35
Contrast pairs
コードスニペット
CSS
:root {
--sparkling-red: #ee3333;
--sparkling-red-rgb: 238 51 51;
--sparkling-red-oklch: oklch(0.619 0.222 26.7);
}
.element {
color: var(--sparkling-red);
background-color: hsl(0 85% 57%);
border-color: oklch(0.619 0.222 26.7);
}Tailwind CSS v4
@theme {
--color-sparkling-red: #ee3333;
--color-sparkling-red-50: #ffded1;
--color-sparkling-red-100: #ffccbe;
--color-sparkling-red-200: #ffae9d;
--color-sparkling-red-300: #ff8574;
--color-sparkling-red-400: #ff5a52;
--color-sparkling-red-500: #f71826;
--color-sparkling-red-600: #d01c22;
--color-sparkling-red-700: #a8171b;
--color-sparkling-red-800: #7e0d16;
--color-sparkling-red-900: #59090e;
--color-sparkling-red-950: #3c0002;
}SCSS
$sparkling-red: #ee3333;
$sparkling-red-rgb: 238, 51, 51;
$sparkling-red-light: mix(#fff, $sparkling-red, 20%);
$sparkling-red-dark: mix(#000, $sparkling-red, 20%);
.element {
color: $sparkling-red;
box-shadow: 0 0 0 2px rgba($sparkling-red, 0.35);
}