色名 · #FFC72C
Pineapple Gold
Pineapple Goldは#FFC72C：rgb(255 199 44)、hsl(44 100% 59%)、oklch(0.857 0.165 86.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Yellow mean? → · Pineapple Gold color name →
#FFC72C
oklch(0.857 0.165 86.5)
カラー変換
- HEX
- #ffc72c
- RGB
- rgb(255 199 44)
- HSL
- hsl(44 100% 59%)
- HWB
- hwb(44 17% 0%)
- OKLCH
- oklch(0.857 0.165 86.5)
- OKLab
- oklab(0.857 0.01 0.165)
- CIE Lab
- lab(83.62 11.14 77.15)
- LCH
- lch(83.62 77.95 81.8)
- CMYK
- cmyk(0% 22% 83% 0%)
ティント · シェード · トーン
ティント
- FFCD50
- FFD36A
- FFD980
- FFDF95
- FFE4A8
- FFEABA
- FFEFCC
- FFF5DD
- FFFAEE
シェード
- DEAD25
- BE931E
- 9E7A17
- 806211
- 634C0A
- 483605
- 2E2102
- 160E01
- 030200
トーン
- F2C041
- E5B94F
- D8B259
- CBAB62
- BEA469
- B19D6F
- A59675
- 988F79
- 8C877D
カラーハーモニー
補色 +180°
- FFC72C
Pineapple Gold
- BBCFFF
≈ Ice Cold Stare
類似色 -30° +30°
- FFC72C
Pineapple Gold
- FFC195
≈ Wispy White
- CADD4E
≈ Yuzukoshō
トライアド +120° +240°
- FFC72C
Pineapple Gold
- 15EAFF
≈ Whimsical Blue
- FFB0FF
≈ Strawberry Buttercream
スプリットコンプリメンタリー +150° +210°
- FFC72C
Pineapple Gold
- 9CD9FF
≈ Shiva Blue
- D4C6FF
≈ Innocent Snowdrop
テトラード +90° +180° +270°
- FFC72C
Pineapple Gold
- 00F1CD
≈ Fake Jade
- BBCFFF
≈ Ice Cold Stare
- FFB9D1
≈ Baby Pink
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.56:1 · APCA Lc 25
Ag
AAA黒の上
WCAG 13.45:1 · APCA Lc 78
最適な文字色: #000000
WCAG 13.45:1 (AAA) · APCA Lc 78
Contrast pairs
コードスニペット
CSS
:root {
--pineapple-gold: #ffc72c;
--pineapple-gold-rgb: 255 199 44;
--pineapple-gold-oklch: oklch(0.857 0.165 86.5);
}
.element {
color: var(--pineapple-gold);
background-color: hsl(44 100% 59%);
border-color: oklch(0.857 0.165 86.5);
}Tailwind CSS v4
@theme {
--color-pineapple-gold: #ffc72c;
--color-pineapple-gold-50: #fff3bf;
--color-pineapple-gold-100: #ffe6a8;
--color-pineapple-gold-200: #f1d17f;
--color-pineapple-gold-300: #dab246;
--color-pineapple-gold-400: #c99500;
--color-pineapple-gold-500: #b57a00;
--color-pineapple-gold-600: #996800;
--color-pineapple-gold-700: #7b5300;
--color-pineapple-gold-800: #5c3b00;
--color-pineapple-gold-900: #412900;
--color-pineapple-gold-950: #291600;
}SCSS
$pineapple-gold: #ffc72c;
$pineapple-gold-rgb: 255, 199, 44;
$pineapple-gold-light: mix(#fff, $pineapple-gold, 20%);
$pineapple-gold-dark: mix(#000, $pineapple-gold, 20%);
.element {
color: $pineapple-gold;
box-shadow: 0 0 0 2px rgba($pineapple-gold, 0.35);
}