What it costs
- Free tier
- Yes
Open-source color scheme (free, no paid option); scraped page is the author's blog rather than a product/pricing page.
Auto-checked on 8 August 2026Source
About Open Color
What Is Open Color?
Open Color is an open-source color scheme optimized for UI design, providing a collection of pre-defined colors suitable for elements like fonts, backgrounds, and borders. As a free tool in the color tools category, Open Color offers designers and developers a ready-to-use palette that ensures visual harmony across user interfaces without the need for extensive color selection.
What Open Color Does
- Provides a palette with colors across multiple hues including gray, red, pink, grape, violet, indigo, blue, cyan, teal, green, lime, yellow, and orange.
- Offers 21 shades per hue for fine-tuned control in UI elements such as backgrounds, text, and borders.
- Supports installation via npm or bower for integration into development projects.
- Exports colors in formats including CSS, Sass, Less, Stylus, JSON, SVG, TeX, Sketch, Inkscape, Tailwind, and TypeScript.
- Allows direct use of color variables in stylesheets, such as $oc-gray-0 for backgrounds or var(--oc-teal-7) for links.
- Includes an instructions section detailing intended uses for each color in UI contexts.
How Open Color Can Be Used
- Import the color scheme into Sass or SCSS files to apply consistent colors to body backgrounds, text, and interactive elements like links on hover.
- Use CSS custom properties from the Open Color stylesheet to style components such as buttons, icons, and forms in web projects.
- Incorporate the palette into design tools like Sketch or Inkscape by importing supported files for mockups and prototypes.
- Apply shades for semantic purposes, such as lighter grays for surfaces and darker ones for text, in mobile app interfaces or dashboard designs.
- Combine hues like teal and indigo for accent colors in navigation menus or charts during frontend development workflows.
Who Is Open Color For?
Open Color serves UI designers, front-end developers, and teams working on web and mobile interfaces who need a reliable, open-source color palette for consistent application across elements. It fits projects requiring quick color decisions, from prototyping in tools like Figma to production coding in frameworks supporting Sass or Tailwind, particularly for those prioritizing harmony in font, background, and border colors without custom palette generation. Visit Open Color
Featured Tools
Sponsored
Pryzm
Pryzm is a real-time studio for designers who need backgrounds that don't look like everyone else's. Layer procedural gradients, then stack glass, grain, light and blobs.
AI Boilerplate
The boilerplate built for vibe coding. Includes authentication, payments, storage, and a clean, AI-readable codebase, already wired up. Build on rails that don't break at prompt 100.
Framer
Design and launch your dream website with no coding required.
Your tool here
The tools above are our own picks until the slots sell.
Spotlight
SponsoredRotates daily
Artlist
Royalty-free music, SFX, 8K footage, templates, LUTs and 100+ AI models on a single subscription for video creators.
More Color Tools Tools
Hue Codex
Hue Codex is a free, no-account color workspace for designers and developers, with palette generation, WCAG contrast checks, modern CSS tools, image color extraction, local saving, and exports.
Upclimb Color Picker
A free browser-based tool for designers & clients to decide on color schemes. Pick & save colors, generate color palettes, extract website colors, check WCAG contrast & find passing colors.
Adobe Color
Create and explore color themes and trends with an inspirational tool.
Alphredo
Generate translucent colors that match their opaque versions.
Atmos
Easily create effective UI color palettes.
Cheeky Palettes
Find color palette inspiration in real-world context.
Explore Other Categories
Discover more design resources
New to Design?
Explore our comprehensive design glossary to master essential terminology from A/B Testing to Wireframes.
Browse GlossaryLooking for something specific?
Search through our entire collection of design tools and resources