For color utility classes, the strongest matches are tachyons-css/tachyons (Tachyons is a utility-first CSS framework that provides a), tailwindlabs/tailwindcss (Tailwind CSS is the industry-standard utility-first framework that provides) and mrmrs/colors (This project provides a utility-first system specifically for managing). franken-ui/ui and unocss/unocss round out the shortlist. Each is ranked by relevance to your query, popularity and recent activity.
Find the best CSS color utility libraries. We ranked top open-source projects by stars and activity to help you compare and pick the right one.
Tachyons is a utility-first CSS framework and functional CSS library. It provides a collection of single-purpose classes used to style elements and build layouts without writing custom CSS. The framework centers on a mobile-first responsive design system and a nestable grid architecture that adapts layouts across different screen sizes. It includes accessible color palettes and schemes designed to meet visual contrast and accessibility standards. The system provides tools for utility-first styling, responsive layout management, and visual debugging to resolve alignment and spacing issues.
Tachyons is a utility-first CSS framework that provides a comprehensive set of single-purpose classes for color palettes, theming, and responsive styling, directly matching the requirements for a utility-first design system.
Utility-first CSS framework for fast, design-system-friendly styling.
Tailwind CSS is the industry-standard utility-first framework that provides a comprehensive system for managing color palettes, custom themes, and responsive state variants directly through its utility-class architecture.
This project is a CSS color utility library and palette framework designed to standardize the application of colors to text, backgrounds, and borders on the web. It provides a web color style system with predefined classes and defaults to accelerate the visual styling of web prototypes. The system utilizes skin-based color theming, allowing users to swap entire color palettes by changing top-level classes. It employs a utility class system backed by global CSS variable mapping to ensure visual harmony across different UI elements. The framework supports rapid UI prototyping and general web c
This project provides a utility-first system specifically for managing color palettes and themes through CSS classes, making it a focused tool for color-related styling even if it lacks the broader layout utilities found in comprehensive frameworks.
This project is a design system toolkit and component library that provides a framework-agnostic approach to building web interfaces. It centers on an HTML-first development model, utilizing standard markup and utility-based CSS classes to construct consistent, responsive layouts. The library is built upon the UIkit 3 framework, allowing for the integration of pre-styled interface elements while maintaining control over the underlying markup structure. It further extends these capabilities through web component encapsulation, using custom elements to provide modular and isolated interface log
This project provides a utility-first styling system built on Tailwind CSS and UIkit, offering the requested color palette management, theme support, and utility-based architecture for building interfaces.
UnoCSS is an atomic CSS engine and utility-first framework that generates styles on-demand based on the specific classes used in your source code. By scanning your project files during the build process, it produces only the CSS necessary for your application, effectively minimizing bundle size and eliminating unused styles. The engine distinguishes itself through a highly modular, configuration-driven architecture that allows for deep customization of design tokens, rules, and presets. It supports advanced styling patterns such as attribute-based styling, tag-based styling, and dynamic varia
UnoCSS is a highly configurable, utility-first CSS engine that provides extensive support for custom color palettes, theming, and state-based modifiers through its modular design system.
NativeWind is a utility-first CSS framework that integrates Tailwind CSS design patterns into React Native applications. It functions as a cross-platform styling system and style mapper that translates CSS-based utility classes into native style objects compatible with mobile platforms. The framework provides a responsive UI engine that implements breakpoints, dark mode management, and platform-specific modifiers. It allows for the definition of custom themes including global colors, fonts, and spacing values to maintain a consistent visual identity across different devices. The system cover
NativeWind is a utility-first framework that brings Tailwind CSS's color palette, theming, and utility-based styling system to React Native, making it a direct fit for managing color-related styles in a mobile-first environment.
Open Props is a CSS custom property library and design token set providing reusable variables for colors, typography, and layout. It functions as a CSS variable framework and design system intended to ensure visual consistency across components and platforms. The project includes an optimization toolkit for generating selector-scoped variable bundles and removing unused design tokens from stylesheets to reduce final file size. It also provides configuration files to enable design variable autocompletion within code editors. The system covers broader capabilities in adaptive web interface des
Open Props provides a comprehensive set of CSS custom properties and design tokens that function as a utility-first foundation for managing color palettes and themes, though it focuses on variable-based styling rather than providing traditional utility classes.
Stitches is a CSS-in-JS library and near-zero runtime CSS engine designed to define styles in JavaScript with minimal overhead. It functions as a variant-based styling framework and a tool for server-side rendered CSS, ensuring styles are extracted and rendered on the server to prevent layout shifts during client hydration. The project distinguishes itself through a structured variants API, allowing for the creation of multiple visual states for components that can be toggled via properties. It implements a system for design system development, focusing on high-performance UI styling and the
Stitches is a CSS-in-JS library that provides a robust system for design tokens and theme-based styling, offering the utility-like variant management and theming capabilities required for building consistent color palettes.
Skeleton is a Svelte Tailwind UI toolkit and adaptive component library. It provides a utility-first design system for building reactive web interfaces, focusing on consistent themes and typography across various screen sizes. The toolkit combines pre-styled components with layout tools to support responsive UI design and rapid frontend prototyping. It enables the creation of adaptive user interfaces through a standardized set of utility classes for styling and layout. The system covers high-level capabilities in Svelte web development and Tailwind CSS styling, utilizing a flexible grid syst
Skeleton is a UI component library built on top of Tailwind CSS that provides a robust system for theme management and utility-first styling, making it a strong fit for managing color palettes and adaptive design.
Topcoat is a CSS UI framework and component library used for building web application interfaces. It serves as a design system implementation that provides a set of reusable styled elements and layout primitives to ensure visual consistency across web pages. The system utilizes a BEM-based styling architecture to manage specificity and prevent style leakage. It combines a utility-first CSS library for common layout and spacing needs with a responsive CSS grid that adjusts based on viewport width. The framework covers front end styling, responsive web development, and rapid UI prototyping. It
Topcoat provides a utility-first CSS architecture with support for custom theming and layout primitives, making it a suitable tool for managing consistent design systems and color-related styling.
Skeleton is a design system and accessible UI component library built on Tailwind CSS. It provides a collection of pre-built interactive components with built-in accessibility and state management, alongside a CSS custom properties theme engine that enables runtime theme switching and dark mode support. The project distinguishes itself through its adaptive design system approach, using CSS custom properties to create themeable tokens that integrate directly with Tailwind's utility-first framework. This allows developers to build visual design systems with customizable colors, fonts, and aesth
Skeleton is a design system built on top of Tailwind CSS that provides a robust theme engine and utility-first architecture for managing color palettes and dynamic theming.
Bootstrap is a comprehensive, mobile-first CSS framework designed for building responsive web interfaces. It provides a standardized library of reusable UI components, such as navigation bars, modals, and forms, alongside a robust grid system that ensures consistent layout alignment across diverse viewport sizes. By establishing a baseline through browser normalization and standardized typography, the project enables developers to create accessible, cross-browser compatible web applications. The framework distinguishes itself through a modular Sass-based architecture that allows for deep cust
Bootstrap is a comprehensive CSS framework that provides a robust system for theme customization and utility-based styling, though it is primarily component-oriented rather than strictly utility-first like modern alternatives.
StyleX is a type-safe CSS-in-JS library and atomic CSS compiler that transforms JavaScript style definitions into optimized static CSS and type-safe class names. It functions as a multi-framework styling tool, generating standard CSS assets compatible with various JavaScript UI frameworks and server components. The system includes a CSS design token system and theme engine for managing shared constants and composing visual schemes. It allows for the creation of light, dark, and custom themes through variable overrides and token inheritance. The project covers component styling through object
StyleX is a CSS-in-JS compiler that provides a robust system for defining design tokens, themes, and utility-like atomic styles, making it a powerful tool for managing color palettes and state-based styling in modern web applications.
react-native-reusables is a React Native UI component library and cross-platform mobile design system. It provides a collection of accessible and stylable user interface components designed to maintain visual consistency across different mobile operating systems. The project functions as a headless UI component collection, prioritizing accessibility and functionality over rigid visual presets. It acts as a Tailwind CSS mobile framework by implementing utility-first CSS patterns via NativeWind to facilitate rapid interface prototyping. The library covers mobile UI development and cross-platfo
This library provides a utility-first styling approach for React Native by leveraging NativeWind, allowing you to manage themes and color-related styling through utility classes in a mobile-focused environment.
Papercss is a CSS UI framework and document-style design system used to build responsive web page layouts. It functions as a Less-based CSS library that applies a paper-like aesthetic and structured typography to give web pages the appearance of physical documents. The project also incorporates a utility-first CSS library model for rapid styling. The framework is distinguished by its ability to automate visual decorations, such as applying rotating border styles and shadow effects to child elements. It utilizes a Less-based variable system and modular stylesheet compilation, allowing users to
Papercss is a utility-first CSS framework that provides a structured system for themes and styling, though its primary focus is on a specific hand-drawn aesthetic rather than general-purpose color palette generation.
Bulma is a design-agnostic CSS framework that provides a collection of pre-styled interface components and layout primitives. It is built to be independent of specific JavaScript frameworks or build tools, allowing developers to construct responsive web interfaces by applying standardized classes directly to semantic HTML markup. The framework distinguishes itself through a utility-first approach that combines modular component styling with a flexible grid system. It leverages native CSS variables to manage design tokens, enabling real-time visual customization, automatic dark mode adaptation
Bulma is a CSS framework that provides a robust set of pre-defined utility classes for layout and styling, including built-in support for color palettes and theme customization via CSS variables.
Chakra UI is a design system component library and styling framework that provides a foundation for building consistent, accessible web interfaces. It functions as a centralized theme configuration engine, using a design-token-driven architecture to manage visual properties like color palettes and spacing rules as a single source of truth across an entire application. The framework distinguishes itself through a type-safe styling utility that automatically generates TypeScript definitions from theme configurations, ensuring accurate property referencing and editor autocompletion. It employs a
Chakra UI is a component-based styling framework that uses a design-token-driven architecture to manage color palettes and themes, providing the utility-first styling capabilities and state-based modifiers you need.
Basscss is a lightweight CSS utility toolkit built on an atomic, single-purpose class architecture. Each class performs exactly one visual function, enabling immutable, side-effect-free styling where no class ever overrides or conflicts with another. The system provides a predefined spacing scale, responsive breakpoint prefixes for conditional styling across device widths, and accessible visibility control that keeps content programmatically available to assistive technologies. The framework distinguishes itself through a float-based grid system that constructs layouts using floated percentag
Basscss is a lightweight utility-first CSS framework that provides atomic classes for styling, including color and border utilities, though it lacks the advanced built-in theme generation features found in more modern alternatives.
This project is a utility-first component library that provides a comprehensive suite of pre-styled, reusable interface elements. It functions as a build-time engine that generates design-system-compliant styles by mapping semantic tokens to standard HTML elements and utility classes. By compiling all component styles into static CSS at build time, the library eliminates the need for client-side style calculation, ensuring efficient performance. The library distinguishes itself through a configuration-driven architecture that manages color palettes and visual styles, enabling dynamic switchin
This is a utility-first CSS framework that builds upon Tailwind CSS to provide semantic color palettes, theme management, and utility-based styling for interface components.
Mobi.css is a lightweight, mobile-first CSS framework designed to provide a consistent foundation for web interface development. It establishes a stable visual baseline by normalizing default browser styles across all platforms, ensuring that standard interface elements like buttons, forms, and text blocks maintain a cohesive appearance. The framework utilizes a flexible grid system based on container models that automatically adjust content dimensions and alignment to fit varying screen sizes and device orientations. By prioritizing mobile constraints and employing viewport-based breakpoints
This is a lightweight, mobile-first CSS framework that provides a structured utility-based approach to styling, though it focuses more on layout and component primitives than on extensive built-in color palette generation.
Flowbite is a cross-framework UI library and design system built as a collection of pre-styled components and layout blocks using Tailwind CSS utility classes. It functions as a TypeScript UI toolkit and a general web framework for creating responsive websites and applications. The project provides a mirroring Figma design system to allow prototyping of components and variants before they are coded. It distinguishes itself through an AI-driven approach to page generation and the creation of design specifications via a command-line interface. The library covers a wide range of interactive int
Flowbite is a UI component library built on top of Tailwind CSS that provides pre-styled components and utility-based design patterns, making it a practical choice for managing themes and color-related styling within a utility-first workflow.
| Repository | Stars | Language | License | Last push |
|---|---|---|---|---|
| tachyons-css/tachyons | 11.7K | CSS | MIT | |
| tailwindlabs/tailwindcss | 95.6K | TypeScript | MIT | |
| mrmrs/colors | 9.4K | CSS | NOASSERTION | |
| franken-ui/ui | 2.6K | TypeScript | MIT | |
| unocss/unocss | 18.9K | TypeScript | NOASSERTION | |
| nativewind/nativewind | 8K | TypeScript | MIT | |
| argyleink/open-props | 5.4K | HTML | MIT | |
| stitchesjs/stitches | 7.8K | JavaScript | MIT | |
| brain-bones/skeleton | 6K | TypeScript | MIT | |
| topcoat/topcoat | 4.2K | HTML | Apache-2.0 |