色名 · #AFBB42
Hopscotch
Hopscotchは#AFBB42：rgb(175 187 66)、hsl(66 48% 50%)、oklch(0.76 0.144 114.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Yellow mean? → · Hopscotch color name →
#AFBB42
oklch(0.76 0.144 114.7)
カラー変換
- HEX
- #afbb42
- RGB
- rgb(175 187 66)
- HSL
- hsl(66 48% 50%)
- HWB
- hwb(66 26% 27%)
- OKLCH
- oklch(0.76 0.144 114.7)
- OKLab
- oklab(0.76 -0.06 0.131)
- CIE Lab
- lab(73.22 -16.02 57.17)
- LCH
- lch(73.22 59.37 105.6)
- CMYK
- cmyk(6% 0% 65% 27%)
ティント · シェード · トーン
ティント
- B6C25A
- BEC96F
- C6D083
- CED795
- D6DEA7
- DEE4B9
- E6EBCB
- EEF2DC
- F7F8EE
シェード
- 98A238
- 818A2F
- 6B7325
- 565C1C
- 414614
- 2E320B
- 1C1F05
- 0B0D01
- 010200
トーン
- AAB54D
- A5AF56
- A0A95D
- 9BA464
- 979E6A
- 92986F
- 8D9274
- 898C78
- 84867C
カラーハーモニー
補色 +180°
- AFBB42
Hopscotch
- B79EFF
≈ Diva
類似色 -30° +30°
- AFBB42
Hopscotch
- DBA82B
≈ Fine Gold
- 72C975
≈ Snow Pea
トライアド +120° +240°
- AFBB42
Hopscotch
- 39BEFE
≈ Megaman
- F788B6
≈ Brown Knapweed
スプリットコンプリメンタリー +150° +210°
- AFBB42
Hopscotch
- 8AAFFF
≈ Kitten’s Eye
- DE90E3
≈ Bright Lilac
テトラード +90° +180° +270°
- AFBB42
Hopscotch
- 00C8D7
≈ Turquoise Surf
- B79EFF
≈ Diva
- FF8A83
≈ Coral Trails
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.09:1 · APCA Lc 41
Ag
AAA黒の上
WCAG 10.00:1 · APCA Lc 61
最適な文字色: #000000
WCAG 10.00:1 (AAA) · APCA Lc 61
Contrast pairs
コードスニペット
CSS
:root {
--hopscotch: #afbb42;
--hopscotch-rgb: 175 187 66;
--hopscotch-oklch: oklch(0.76 0.144 114.7);
}
.element {
color: var(--hopscotch);
background-color: hsl(66 48% 50%);
border-color: oklch(0.76 0.144 114.7);
}Tailwind CSS v4
@theme {
--color-hopscotch: #afbb42;
--color-hopscotch-50: #f2fbcd;
--color-hopscotch-100: #e4efb8;
--color-hopscotch-200: #d0dd96;
--color-hopscotch-300: #b3c168;
--color-hopscotch-400: #9da835;
--color-hopscotch-500: #859000;
--color-hopscotch-600: #707900;
--color-hopscotch-700: #5a6100;
--color-hopscotch-800: #444700;
--color-hopscotch-900: #2f3100;
--color-hopscotch-950: #1b1d00;
}SCSS
$hopscotch: #afbb42;
$hopscotch-rgb: 175, 187, 66;
$hopscotch-light: mix(#fff, $hopscotch, 20%);
$hopscotch-dark: mix(#000, $hopscotch, 20%);
.element {
color: $hopscotch;
box-shadow: 0 0 0 2px rgba($hopscotch, 0.35);
}