Benoemde kleur · #FFFF44
Peppy Pineapple
Peppy Pineapple is #FFFF44: rgb(255 255 68), hsl(60 100% 63%), oklch(0.97 0.193 109.5). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Yellow mean? → · Peppy Pineapple color name →
#FFFF44
oklch(0.97 0.193 109.5)
Kleurconversies
- HEX
- #ffff44
- RGB
- rgb(255 255 68)
- HSL
- hsl(60 100% 63%)
- HWB
- hwb(60 27% 0%)
- OKLCH
- oklch(0.97 0.193 109.5)
- OKLab
- oklab(0.97 -0.064 0.182)
- CIE Lab
- lab(97.75 -14.77 82.25)
- LCH
- lch(97.75 83.56 100.2)
- CMYK
- cmyk(0% 0% 73% 0%)
Tinten · Schaduwen · Tonen
Tinten
- FFFF64
- FEFF7C
- FEFF90
- FEFFA3
- FEFFB4
- FEFFC4
- FEFFD3
- FEFFE2
- FFFFF1
Schaduwen
- DEDE3A
- BEBE30
- 9E9E26
- 80801D
- 636314
- 48480C
- 2E2E05
- 161602
- 030300
Tonen
- F1F254
- E4E55F
- D7D868
- CACB6F
- BDBF74
- B0B278
- A4A57B
- 98997E
- 8C8C7F
Kleurharmonieën
Complementair +180°
- FFFF44
Peppy Pineapple
- F4F4FF
≈ Sugar Crystal
Analoog -30° +30°
- FFFF44
Peppy Pineapple
- FFF4E1
≈ Creamy Cloud Dreams
- E2FFDB
≈ Frosted Plains
Triadisch +120° +240°
- FFFF44
Peppy Pineapple
- E9F8FF
≈ Clear Skies
- FFF1F7
≈ Lavender Blush
Gesplitst complementair +150° +210°
- FFFF44
Peppy Pineapple
- EFF6FF
≈ Alice Blue
- FCF1FF
≈ Pinkish White
Tetradisch +90° +180° +270°
- FFFF44
Peppy Pineapple
- D8FEFF
≈ Salt Mountain
- F4F4FF
≈ Sugar Crystal
- FFF1F1
≈ Sefid White
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 1.06:1 · APCA Lc 0
Ag
AAAOp zwart
WCAG 19.63:1 · APCA Lc 103
Beste tekstkleur: #000000
WCAG 19.63:1 (AAA) · APCA Lc 103
Contrast pairs
Codefragmenten
CSS
:root {
--peppy-pineapple: #ffff44;
--peppy-pineapple-rgb: 255 255 68;
--peppy-pineapple-oklch: oklch(0.97 0.193 109.5);
}
.element {
color: var(--peppy-pineapple);
background-color: hsl(60 100% 63%);
border-color: oklch(0.97 0.193 109.5);
}Tailwind CSS v4
@theme {
--color-peppy-pineapple: #ffff44;
--color-peppy-pineapple-50: #f6fbbb;
--color-peppy-pineapple-100: #e9efa3;
--color-peppy-pineapple-200: #d7dc77;
--color-peppy-pineapple-300: #bbc036;
--color-peppy-pineapple-400: #a8a600;
--color-peppy-pineapple-500: #928d00;
--color-peppy-pineapple-600: #7b7700;
--color-peppy-pineapple-700: #635f00;
--color-peppy-pineapple-800: #4b4500;
--color-peppy-pineapple-900: #343000;
--color-peppy-pineapple-950: #201c00;
}SCSS
$peppy-pineapple: #ffff44;
$peppy-pineapple-rgb: 255, 255, 68;
$peppy-pineapple-light: mix(#fff, $peppy-pineapple, 20%);
$peppy-pineapple-dark: mix(#000, $peppy-pineapple, 20%);
.element {
color: $peppy-pineapple;
box-shadow: 0 0 0 2px rgba($peppy-pineapple, 0.35);
}