色名 · #CCD87A
Goody Gumdrop
Goody Gumdropは#CCD87A：rgb(204 216 122)、hsl(68 55% 66%)、oklch(0.853 0.119 114.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Yellow mean? → · Goody Gumdrop color name →
#CCD87A
oklch(0.853 0.119 114.9)
カラー変換
- HEX
- #ccd87a
- RGB
- rgb(204 216 122)
- HSL
- hsl(68 55% 66%)
- HWB
- hwb(68 48% 15%)
- OKLCH
- oklch(0.853 0.119 114.9)
- OKLab
- oklab(0.853 -0.05 0.108)
- CIE Lab
- lab(83.88 -14.47 44.66)
- LCH
- lch(83.88 46.94 107.9)
- CMYK
- cmyk(6% 0% 44% 15%)
ティント · シェード · トーン
ティント
- D1DC89
- D6E097
- DBE4A4
- E0E8B2
- E5ECBF
- EAF0CC
- EFF4D9
- F4F8E6
- FAFBF2
シェード
- B1BC69
- 97A059
- 7E8549
- 656B3A
- 4E532B
- 373B1D
- 222510
- 0F1105
- 020201
トーン
- C4CF7C
- BCC67E
- B4BD7F
- ADB480
- A5AB81
- 9DA381
- 969A81
- 8E9181
- 878981
カラーハーモニー
補色 +180°
- CCD87A
Goody Gumdrop
- D2C5FF
≈ Innocent Snowdrop
類似色 -30° +30°
- CCD87A
Goody Gumdrop
- F2C86E
≈ Cornsilk Yellow
- 9CE39E
≈ Granny Smith Apple
トライアド +120° +240°
- CCD87A
Goody Gumdrop
- 96D8FF
≈ Shiva Blue
- FFB6D2
≈ Candy Bar
スプリットコンプリメンタリー +150° +210°
- CCD87A
Goody Gumdrop
- B8CFFF
≈ Ice Cold Stare
- F6B3FA
≈ Strawberry Buttercream
テトラード +90° +180° +270°
- CCD87A
Goody Gumdrop
- 5BE5F3
≈ Shimmering Expanse Cyan
- D2C5FF
≈ Innocent Snowdrop
- FFBBB4
≈ Cherry Chip
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.53:1 · APCA Lc 25
Ag
AAA黒の上
WCAG 13.67:1 · APCA Lc 78
最適な文字色: #000000
WCAG 13.67:1 (AAA) · APCA Lc 78
Contrast pairs
コードスニペット
CSS
:root {
--goody-gumdrop: #ccd87a;
--goody-gumdrop-rgb: 204 216 122;
--goody-gumdrop-oklch: oklch(0.853 0.119 114.9);
}
.element {
color: var(--goody-gumdrop);
background-color: hsl(68 55% 66%);
border-color: oklch(0.853 0.119 114.9);
}Tailwind CSS v4
@theme {
--color-goody-gumdrop: #ccd87a;
--color-goody-gumdrop-50: #f2fad4;
--color-goody-gumdrop-100: #e5eec1;
--color-goody-gumdrop-200: #d0dba1;
--color-goody-gumdrop-300: #b3c078;
--color-goody-gumdrop-400: #9ca74f;
--color-goody-gumdrop-500: #848f1c;
--color-goody-gumdrop-600: #70791b;
--color-goody-gumdrop-700: #596116;
--color-goody-gumdrop-800: #43460b;
--color-goody-gumdrop-900: #2e3107;
--color-goody-gumdrop-950: #1b1d00;
}SCSS
$goody-gumdrop: #ccd87a;
$goody-gumdrop-rgb: 204, 216, 122;
$goody-gumdrop-light: mix(#fff, $goody-gumdrop, 20%);
$goody-gumdrop-dark: mix(#000, $goody-gumdrop, 20%);
.element {
color: $goody-gumdrop;
box-shadow: 0 0 0 2px rgba($goody-gumdrop, 0.35);
}