font‑palette CSS Playground - Online Color Fonts Explorer
Pick a COLRv1 color font and change its palette with font‑palette. Create custom palettes with @font‑palette‑values.
UD5 Toolkit
Transform emotions, words & ideas into beautiful hex color palettes
# followed by three pairs of hexadecimal digits (00–FF) representing the intensity of Red, Green, and Blue. For example, #FF6B6B is a warm coral red. Hex codes are the standard way to define colors in CSS, HTML, and most design tools.
#FEF3C7, #FDE68A, #FBBF24, #F59E0B, #B45309), ready to paste into your design software or code editor.
Pick a COLRv1 color font and change its palette with font‑palette. Create custom palettes with @font‑palette‑values.
Search a library of famous company brand colors with hex codes. Copy any color instantly. For designers and marketers.
Pick two colors and mix them in different color spaces with sliders. See the difference between sRGB and OKLCH mixing. Copy the code.
Pick an emoji and get the exact CSS content property value with escaped Unicode. For inserting emojis via CSS.
Write CSS like `oklch(from red l c h)` to modify colors. Preview the output and copy. Modern color manipulation.
Convert a hex color to RGBA and add an opacity slider. Get the exact CSS string for modern transparent designs.
Convert any text to snake_case, kebab‑case, camelCase, or PascalCase. Essential for programming variable naming. Local.
Style underlines, overlines, and strike-throughs with colors, wavy styles, and thickness. Modern CSS text‑decoration.
Write CSS like `oklch(from red l c h)` to modify colors dynamically. Preview the output and copy the code.
Convert hex, RGB, or HSL into the modern OKLCH color space. See the preview and copy CSS oklch() value. Local.
Paste code and get a beautifully highlighted preview with line numbers. Supports many languages. Copy as HTML. Pure frontend.
Convert normal text into various Unicode styles (bold, italic, script, fraktur). Copy and paste anywhere. No font install needed.
Map English letters to fancy mathematical or ornamental Unicode symbols. Create Facebook/Twitter bio art. All local.
Design a modern button with gradients, shadows, and hover effects. Copy the clean CSS code.
Define brand colors, fonts, and spacing. Generate the Chakra UI extendTheme object. Export as JSON or JavaScript.
Compile SCSS code to CSS directly in the browser using the official Sass.js library. Supports variables, mixins, nesting. No server upload required.
Paste regular HTML and instantly get valid React JSX with proper self‑closing tags and className attributes.
Build a complete font‑stack for your website. Choose a primary font and get the best fallback options for different OS. Copy the CSS.
Visually apply CSS transform functions like rotate, scale, skew, and translate. Obtain the exact CSS code for your elements. No coding needed.
Paste your SCSS or Sass code and compile it to standard CSS. Basic sass.js engine runs in your browser. No server.
Build a custom CSS reset by toggling which elements to normalize. Copy the resulting stylesheet. Lean and clean.
Paste or upload an SVG and convert it into a CSS background‑image data URI. Clean and ready to embed.
Paste Jira/Confluence wiki markup and get a rendered HTML preview. Supports headings, lists, links, and code blocks. All local.
Design a fully styled scrollbar with colors, width, radius, and hover effects. Supports both ::-webkit‑scrollbar and Firefox scrollbar‑width.
Optimize an SVG and convert it into a URL‑encoded data URI ready for CSS backgrounds. Strip unnecessary attributes. All local.
Design beautiful buttons with gradients, shadows, and hover/active effects. No JavaScript required. Copy the CSS.
Compile LESS code to plain CSS in your browser. Check for syntax errors and get clean output. For legacy projects.
Browse a collection of common UI components (cards, modals, navbars) built with pure CSS. Preview and copy the HTML/CSS. Fast prototyping.
Choose from a dozen pure CSS loading spinners. Customize color, size, and speed. Copy the HTML & CSS. No JavaScript needed.
Write a standard README with pre‑filled sections like Installation, Usage, and License. Export as Markdown. Save time.