UD5 Toolkit
CSS Color Function Explorer - Online Write Modern Colors
Write modern CSS color functions like oklch(), lab(), hwb() and see the rendered color with fallback. Copy compatible code.
font‑palette CSS Playground - Online Color Fonts Explorer
Font Palette Playground
CSS color fonts explorer
Color Fonts Rock! 🎨
Tip: Color fonts (COLRv1) are supported in Chrome 101+, Edge 101+, Firefox 107+, and Safari 17+. Try different palettes to see the font transform!
Frequently Asked Questions
What is CSS font-palette?
The font-palette CSS property allows you to select a specific color palette from a color font (like COLRv0/v1 or SVG fonts). Color fonts contain multiple built-in palettes—such as normal, light, and dark—and you can switch between them or create entirely custom palettes using @font-palette-values.
What are color fonts (COLRv1)?
Color fonts are font files that include multiple colors, gradients, and even layered designs within the glyphs themselves. COLRv1 is the modern W3C standard for color fonts, supporting gradients, blends, and rich multi-colored glyphs. Popular COLRv1 fonts include Nabla, Bungee Spice, Foldit, and Honk, all available on Google Fonts.
How does @font-palette-values work?
The @font-palette-values at-rule lets you define a custom color palette for a specific font family. You can set a base-palette (0 for normal, 1 for light, 2 for dark) and then use override-colors to replace specific color slots with your own colors. Each slot is referenced by its index (0, 1, 2, etc.) and corresponds to a specific color layer in the font's design.
How many color slots does each font have?
It varies by font. Nabla has approximately 10 color slots (indices 0–9), while Bungee Spice has around 5–6 slots. The slots typically represent different parts of the glyph—shadows, midtones, highlights, outlines, and fill colors. Experiment with the color pickers above to discover how each slot affects the rendered text!
Which browsers support font-palette?
As of 2024, font-palette and @font-palette-values are supported in Chrome 101+, Edge 101+, Firefox 107+, and Safari 17+ (with partial support from Safari 15.4). On unsupported browsers, color fonts will still render using their default palette—a graceful fallback.
Can I use font-palette with regular (non-color) fonts?
No. The font-palette property only works with color fonts (COLRv0, COLRv1, or SVG fonts). Regular monochrome fonts (like Arial, Roboto, or Inter) don't have color palettes to switch. If you apply font-palette to a regular font, it will simply be ignored.
Where can I find more color fonts?
Google Fonts has a growing collection of COLRv1 color fonts—search for "color" in the Google Fonts library or filter by the "Color" technology tag. Some excellent options include Nabla, Bungee Spice, Foldit, Honk, Linefont, Video, and Noto Color Emoji (for emoji rendering). You can also find color fonts on independent foundries and font marketplaces.
What's the difference between base-palette 0, 1, and 2?
These correspond to the font's built-in palette variations: 0 = normal (the default, often vibrant), 1 = light (typically pastel or lighter tones), and 2 = dark (darker, moodier colors). Not all fonts define all three—some may only have palette 0. Using @font-palette-values, you can base your custom palette on any of these and then override specific slots.
CSS Relative Color Syntax Playground - Online from a Base Color
Write CSS like `oklch(from red l c h)` to modify colors. Preview the output and copy. Modern color manipulation.
Mix‑Blend‑Mode Playground - Online CSS Effect Tester
Pick two images or colors and apply all 16 CSS mix‑blend‑mode values live. See and copy the right CSS for your design.
CSS Relative Color Playground - Online Manipulate Colors
Write CSS like `oklch(from red l c h)` to modify colors dynamically. Preview the output and copy the code.
@scope CSS At‑Rule Playground - Online Scoped Styles
Write scoped CSS rules that apply only within a subtree. See the boundary limits and avoid naming conflicts. New browser feature.
Text Transform Functions Playground - Online Preview CSS
Type text and instantly see it rendered with text‑transform: uppercase, lowercase, capitalize, and full‑width. Copy CSS.
CSS UI Pattern Library - Online Copy‑Paste Components
Browse a collection of common UI components (cards, modals, navbars) built with pure CSS. Preview and copy the HTML/CSS. Fast prototyping.
CSS Gradient Generator - Online Color Gradient Creator
Visually create beautiful linear and radial gradients. Get the CSS code instantly. Copy the code or export as image. Perfect for web designers.
CSS Modules Class Name Generator - Online Scoped Styles
Write global CSS and auto‑generate unique, scoped class names with source maps. Understand CSS Modules naming.
CSS color‑mix() Visualizer - Online Blend in sRGB & OKLCH
Pick two colors and mix them in different color spaces with sliders. See the difference between sRGB and OKLCH mixing. Copy the code.
CSS Button Styler - Online Pure CSS Effects
Design beautiful buttons with gradients, shadows, and hover/active effects. No JavaScript required. Copy the CSS.
Gradient Swatch Exporter - Online CSS to PNG Palette
Paste a CSS gradient and export a vertical swatch image. Ideal for design documents. No server needed.
Gradient Text CSS Generator - Online Clip & Fill
Create gradient‑filled text with the background‑clip property. Choose linear or radial gradients. Get the CSS. Modern typography.
Clip Path Playground - Online Interactive CSS Shapes
Drag points to create a custom clip‑path shape. See the CSS value update live. For creating non‑rectangular elements.
CSS 3D Perspective Playground - Online Scene Builder
Set perspective and rotate children in 3D space. See the effect of perspective‑origin. Copy the CSS. Learn 3D transforms.
CSS Grid Layout Generator - Online Visual Grid Builder
Build CSS Grid layouts by defining columns, rows, and gaps visually. Get the complete grid CSS code. An essential web design tool running in the browser.
CSS Filter Generator - Online Visual SVG Filter Builder
Interactively apply CSS filter functions (blur, brightness, contrast, etc.) to an image and copy the resulting filter property. No coding required.
<progress> & <meter> CSS Styler - Online Generator
Style the <progress> and <meter> elements with cross‑browser CSS. Adjust colors and sizes. Copy the final styles.
CSS Filter Visual Editor - Online Apply & Chain Filters
Add multiple CSS filters (grayscale, blur, hue‑rotate) to an image. See the combined effect. Copy the CSS filter value.
LESS to CSS Converter - Online Free Stylesheet Compiler
Compile LESS code to plain CSS in your browser. Check for syntax errors and get clean output. For legacy projects.
CSS Grid Layout Builder - Online Visual Drag & Drop
Add rows and columns, merge cells, and set gaps visually. Get the grid‑template CSS and HTML. Fast layout prototyping.
Online Code Minifier - JS & CSS Compression Tool
Minify JavaScript and CSS code to reduce file size for production. Remove whitespace and comments instantly. Run locally, your code stays private.
CSS Loader Generator - Online Animated Spinner Code
Choose from a dozen pure CSS loading spinners. Customize color, size, and speed. Copy the HTML & CSS. No JavaScript needed.
Code Syntax Highlighter - Online Beautiful Code Preview
Paste code and get a beautifully highlighted preview with line numbers. Supports many languages. Copy as HTML. Pure frontend.
Stylelint Config Generator - Online CSS Linter Setup
Set up Stylelint rules for your project by selecting extensions (SCSS, order, etc.). Output a valid .stylelintrc.
SCSS to CSS Converter - Online Free Sass Compiler
Paste your SCSS or Sass code and compile it to standard CSS. Basic sass.js engine runs in your browser. No server.
JavaScript Beautifier & Formatter - Online JS Code Styler
Make your JavaScript code more readable with this online beautifier. Format and indent JS automatically. Works entirely in your browser, protecting your code privacy.
SCSS to CSS Converter - Online Free Sass Compiler
Compile SCSS code to CSS directly in the browser using the official Sass.js library. Supports variables, mixins, nesting. No server upload required.
CSS Transform Generator - Online Translate Rotate Scale Tool
Visually apply CSS transform functions like rotate, scale, skew, and translate. Obtain the exact CSS code for your elements. No coding needed.
CSS Multi‑Column Layout Generator - Online Newspaper Style
Set column‑count, gap, and rule, and see a multi‑column text layout. Copy the minimal CSS. For magazine designs.