Presets

Palette Configuration

Google's color emoji font

Color Overrides

Live Preview

😀🎉🌈🔥💖🌟🍕🎨🚀🌺

Note: Preview shows sample emojis. Actual palette changes require the color font to be installed.

Your Palette Colors

Index 0#FF5733
Index 1#33FF57
Index 2#3357FF

Generated CSS

@font-palette-values Rule
@font-palette-values --custom-palette {
  font-family: "Noto Color Emoji";
  base-palette: 1;
  override-colors: 0 #FF5733;
  override-colors: 1 #33FF57;
  override-colors: 2 #3357FF;
}
Usage
.element {
  font-family: "Noto Color Emoji", sans-serif;
  font-palette: --custom-palette;
}
Full Example
/* Define the custom font palette */
@font-palette-values --custom-palette {
  font-family: "Noto Color Emoji";
  base-palette: 1;
  override-colors: 0 #FF5733;
  override-colors: 1 #33FF57;
  override-colors: 2 #3357FF;
}

/* Apply to elements */
.emoji-text {
  font-family: "Noto Color Emoji", sans-serif;
  font-palette: --custom-palette;
}

/* Alternative: Use base palettes directly */
.light-emoji {
  font-family: "Noto Color Emoji", sans-serif;
  font-palette: light;
}

.dark-emoji {
  font-family: "Noto Color Emoji", sans-serif;
  font-palette: dark;
}

/* Responsive palette switching */
@media (prefers-color-scheme: dark) {
  .adaptive-emoji {
    font-palette: dark;
  }
}

/* Animation between palettes (where supported) */
@keyframes palette-shift {
  0% { font-palette: light; }
  50% { font-palette: --custom-palette; }
  100% { font-palette: dark; }
}

.animated-emoji {
  animation: palette-shift 3s ease infinite;
}

Rate this tool