色名 · #EB8239
Snappy Happy
Snappy Happyは#EB8239：rgb(235 130 57)、hsl(25 82% 57%)、oklch(0.71 0.154 52)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Snappy Happy color name →
#EB8239
oklch(0.71 0.154 52)
カラー変換
- HEX
- #eb8239
- RGB
- rgb(235 130 57)
- HSL
- hsl(25 82% 57%)
- HWB
- hwb(25 22% 8%)
- OKLCH
- oklch(0.71 0.154 52)
- OKLab
- oklab(0.71 0.095 0.121)
- CIE Lab
- lab(65.54 37.53 55.99)
- LCH
- lch(65.54 67.4 56.2)
- CMYK
- cmyk(0% 45% 76% 8%)
ティント · シェード · トーン
ティント
- EE8F52
- F29C67
- F4A97B
- F7B68E
- F9C2A1
- FBCEB4
- FCDBC7
- FEE7DA
- FFF3EC
シェード
- CC7030
- AE5F28
- 914E1F
- 753E17
- 5B2F10
- 412009
- 291204
- 130601
- 030100
トーン
- E18345
- D6834E
- CC8456
- C1845E
- B78465
- AC836B
- A18371
- 978276
- 8B817B
カラーハーモニー
補色 +180°
- EB8239
Snappy Happy
- 00B0EC
≈ Lynx Screen Blue
類似色 -30° +30°
- EB8239
Snappy Happy
- F37675
≈ You’re Blushing
- CF9700
≈ Leopard
トライアド +120° +240°
- EB8239
Snappy Happy
- 00BD98
≈ Mountain Meadow
- A58DF9
≈ Cobalite
スプリットコンプリメンタリー +150° +210°
- EB8239
Snappy Happy
- 00B7C2
≈ Lago Blue
- 6C9FFF
≈ Âbi Blue
テトラード +90° +180° +270°
- EB8239
Snappy Happy
- 64B95B
≈ Drop Green
- 00B0EC
≈ Lynx Screen Blue
- CE7EDA
≈ Lavender Perceptions
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.69:1 · APCA Lc 52
Ag
AAA黒の上
WCAG 7.78:1 · APCA Lc 50
最適な文字色: #000000
WCAG 7.78:1 (AAA) · APCA Lc 50
Contrast pairs
コードスニペット
CSS
:root {
--snappy-happy: #eb8239;
--snappy-happy-rgb: 235 130 57;
--snappy-happy-oklch: oklch(0.71 0.154 52);
}
.element {
color: var(--snappy-happy);
background-color: hsl(25 82% 57%);
border-color: oklch(0.71 0.154 52);
}Tailwind CSS v4
@theme {
--color-snappy-happy: #eb8239;
--color-snappy-happy-50: #ffeacc;
--color-snappy-happy-100: #ffdbb8;
--color-snappy-happy-200: #ffc395;
--color-snappy-happy-300: #f4a168;
--color-snappy-happy-400: #e4813d;
--color-snappy-happy-500: #d26100;
--color-snappy-happy-600: #b15300;
--color-snappy-happy-700: #8e4200;
--color-snappy-happy-800: #6b2e00;
--color-snappy-happy-900: #4b2002;
--color-snappy-happy-950: #310e00;
}SCSS
$snappy-happy: #eb8239;
$snappy-happy-rgb: 235, 130, 57;
$snappy-happy-light: mix(#fff, $snappy-happy, 20%);
$snappy-happy-dark: mix(#000, $snappy-happy, 20%);
.element {
color: $snappy-happy;
box-shadow: 0 0 0 2px rgba($snappy-happy, 0.35);
}