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
No brands match your search. Try a different keyword.
Brand colors are the specific hues a company uses consistently across its logo, website, packaging, and marketing materials. They form a core part of visual brand identity and help consumers instantly recognize the brandâlike Coca-Cola red or Starbucks green.
Knowing exact brand colors helps designers create complementary materials, maintain brand consistency in collaborations, and build color palettes that harmonize with established brand identities. Accurate color codes prevent costly mismatches in print and digital media.
HEX is the standard for web design (CSS). RGB is used in digital screens and graphic software. HSL (Hue, Saturation, Lightness) is more intuitive for adjusting colorsâdesigners often prefer it for creating variations like lighter tints or darker shades.
Color values themselves are not copyrightable, but using brand colors to imitate or misrepresent a trademarked brand may raise legal concerns. Always use brand colors respectfullyâfor reference, inspiration, or legitimate design work rather than deception.
We source color values from official brand guidelines, press kits, and reputable design references. However, brands occasionally update their palettes. We recommend verifying against the official brand style guide for critical commercial projects.
Study the relationships between a brand's primary and secondary colors. Notice how complementary or analogous hues work together. Use tools like color wheels to adapt these relationships to your own unique paletteâtake inspiration from the harmony, not the exact values.
Primary colors are the main identifying hues (like Netflix red). Secondary colors support the primary palette in UI, illustrations, and marketing. Many brands also have accent colors for calls-to-action or highlights. This tool shows all official brand colors where available.
Pick a COLRv1 color font and change its palette with fontâpalette. Create custom palettes with @fontâpaletteâvalues.
Type a word like 'sunset' or 'calm' and generate a color palette inspired by that mood. Simple associative mapping.
Write CSS like `oklch(from red l c h)` to modify colors. Preview the output and copy. Modern color manipulation.
Pick two colors and mix them in different color spaces with sliders. See the difference between sRGB and OKLCH mixing. Copy the code.
Write CSS like `oklch(from red l c h)` to modify colors dynamically. Preview the output and copy the code.
Design a custom focus indicator with outline, offset, and boxâshadow. Preview on interactive elements. Copy the CSS.
Design a custom focus indicator with outline, offset, and boxâshadow. Preview on interactive elements. Copy the CSS.
Define brand colors, fonts, and spacing. Generate the Chakra UI extendTheme object. Export as JSON or JavaScript.
Convert hex, RGB, or HSL into the modern OKLCH color space. See the preview and copy CSS oklch() value. Local.
Write global CSS and autoâgenerate unique, scoped class names with source maps. Understand CSS Modules naming.
Offlineâfirst search of the CanIUse database. Type a CSS property, HTML element, or API and see global support percentages. Fast.
Design a fully styled scrollbar with colors, width, radius, and hover effects. Supports both ::-webkitâscrollbar and Firefox scrollbarâwidth.
Browse a collection of common UI components (cards, modals, navbars) built with pure CSS. Preview and copy the HTML/CSS. Fast prototyping.
Design a modern button with gradients, shadows, and hover effects. Copy the clean CSS code.
Set up Stylelint rules for your project by selecting extensions (SCSS, order, etc.). Output a valid .stylelintrc.
Create custom flat or plastic badges for your GitHub README. Choose label, message, color, and export as Markdown, HTML, or SVG.
Press any key combination and see the humanâreadable shortcut for macOS and Windows. Developer docs helper.
Write a standard README with preâfilled sections like Installation, Usage, and License. Export as Markdown. Save time.
Build a complete fontâstack for your website. Choose a primary font and get the best fallback options for different OS. Copy the CSS.
Add multiple CSS filters (grayscale, blur, hueârotate) to an image. See the combined effect. Copy the CSS filter value.
Paste CSS with vendor prefixes and get a clean version with only the standard property. Modernize your stylesheets.
Browse and copy common mathematical symbols, Greek letters, and operators. Includes LaTeX codes for use in documents. Quick reference for students.
Design beautiful buttons with gradients, shadows, and hover/active effects. No JavaScript required. Copy the CSS.
Toggle scrollâbehavior: smooth and click anchor links to see the scrolling animation. Implement modern UX.
Write scoped CSS rules that apply only within a subtree. See the boundary limits and avoid naming conflicts. New browser feature.
Paste your SCSS or Sass code and compile it to standard CSS. Basic sass.js engine runs in your browser. No server.
Compile LESS code to plain CSS in your browser. Check for syntax errors and get clean output. For legacy projects.
Compile SCSS code to CSS directly in the browser using the official Sass.js library. Supports variables, mixins, nesting. No server upload required.
Build a custom CSS reset by toggling which elements to normalize. Copy the resulting stylesheet. Lean and clean.
Construct a CSSâonly carousel with scrollâsnap and scrollâdriven animations. Configurable gap, items, and progress indicator. Copy the HTML/CSS.