color
The AI-Powered browser extension for managing colors in CSS Variables
- AI-generated color palettes
- Accessibility testing
- Support for daisyUI and shadcn/ui
Free design tools for UI & UX designers.
OKLCH Color Pattern Generator.
Oklchroma is a color pattern generator that helps designers and developers create harmonious color scales based on the OKLCH color space. Instead of manually defining each shade, Oklchroma generates a complete set of color variables based on a single base color and using mathematical formulas in CSS to generate the rest of the colors.
Color and typography resources and inspiration for Web Developers and Digital Design
the color palette for internet lovers.
uchū is the color palette for internet lovers, by NetOperator Wibby. uchū utilizes the OKLCH color space for reasons. I've been using this color palette for personal projects for about a year and have been quite pleased with it.
Tool to create nice color palettes based on multi-color gradients.
0to255 is a simple tool that helps web designers find variations of any color.
Color picker and converter for OKLCH and LCH color space.
oklch() is a new way to define CSS colors. In oklch(L C H) or oklch(L C H / a) each item corresponds as follows:
- L is perceived lightness (0%-100%). “Perceived” means that it has consistent lightness for our eyes, unlike L in hsl().
- C is chroma, from gray to the most saturated color.
- H is the hue angle (0-360).
- a is opacity (0-1 or 0-100%).
COLOURlovers is an online community for color enthusiasts. Browse palettes or create your own, then get social by commenting and “loving” eachother’s creations, following different “Lovers” and checking out the latest color trends.
Hotpink vous permet de voyager au pays des couleurs web nommées, découvrir des teintes originales et leur histoire, et organiser et créer des palettes stylées.
Put your vision to the test with the Online Color Challenge. Your task is simple… arrange the colors in hue order. Sound easy? You may be surprised to learn where your hue discrimination is low and how you compare to your peers.
TinEye Labs takes image search to the next level by allowing you to choose up to a five-color palette, along with tags, to refine your image search. The result is a collection of picture perfect images that are sure to blend well with your design.
Roue chromatique | Modèles de couleurs. Smooth out your creative workflow with the help of Adobe Color CC. As part of the Creative Cloud, you can create and save color themes and work them seamlessly into other Adobe products. The intuitive color wheel – and ability to pull colors from uploaded images – doesn’t hurt either.
Browser-based, mobile-friendly, actually private tools that make CSS a little less bad.
Spectrum approaches color palettes from the other side. Start with a color and watch as the page is populated with dozens of images that match. A perfect tool when on the hunt for imagery that matches a specific palette.
Color ramp generator using curves within the HSV color model. FettePalette is lightweight, dependency free and fast JavaScript function written in TypeScript. It generates color ramps based on a curve within the HSV color model. This page serves as preview for the variety of options the function takes. FettePalette @ GitHub.
Color picker and converter for OKLCH and LCH color space. OKLCH is a new way to encode colors (like hex, RGBA, or HSL):
- OKLCH has native browser support.
- It can encode more colors for modern screens (P3, Rec. 2020, and beyond).
- Unlike HSL, OKLCH always has predictable contrast after color transformation.
- In contrast with LCH and Lab, no hue shift on chroma changes.
- Provides great accessibility on palette generation.
Keep your eyes sharp with Color, a fun (but surprisingly challenging) color-matching game. Move your cursor around the color spectrum to match the center color for hue, saturation, complementary color and more.
Color Hunt curates a daily collection of colors on a daily basis, so you never run out of inspiration. “Like” your favorites, then filter through the most popular palettes from the past week or all time.
Visualize Your Colors & Fonts On a Real Site.
Choosing colors or typography for your website? Use the Toolbar below to realize your choices.
Calculate colors. Share palettes. A new way to manage digital colors. Leave abstract color models behind and focus on the important things.
Leonardo is a one-of-a-kind tool for creating, managing, and sharing accessible color systems for user interface design and data visualization.
The super fast color schemes generator!
Similar to Hail Pixel, Coolors makes color picking more fluid by helping you mix and match colors until you find the perfect combination. Hit the space button until a color combo appears that you like – then move selections around, adjust color components and export your palette when it’s ready.
Related contents:
Style definitions for nice terminal layouts 👄
Style definitions for nice terminal layouts. Built with TUIs in mind. Lip Gloss takes an expressive, declarative approach to terminal rendering. Users familiar with CSS will feel at home with Lip Gloss.
In WCAG 2, contrast is a measure of the difference in perceived brightness between two colors, expressed as a ratio
CSS.coloratum is a nifty little tool that helps you:
Share colors with friends and colleagues (never have to go through describing a shade again, just give them the link!)
Check out what RGB & HSL values correspond to that color keyword you keep using
Covert HSL to RGB, because you're done with your prototype and now it has to work in IE8 too
...and much more!
This native application (available for both Windows and Mac) allows you to evaluate the color visibility and contrast of foreground/background color combinations. It provides an initial pass/fail assessment against WCAG 2.0 color contrast success criteria.
Consider yourself a color whiz? Take a break from your workday with Hex Invaders. Inspired by Space Invaders, this game takes a creative spin by challenging you to destroy the invader that matches the Hex code on the top of your screen. Bonus: it teaches you how to break down the reds, greens and blues in Hex codes fast. Enjoy!
an easy-to-use jQuery color picker for Twitter Bootstrap
Tanaguru Contrast-Finder trouve les bons contrastes de couleurs pour l'accessibilité web
Dive into the customer's mind. Read guides. Watch cool videos. Pricing, sales, design, negotiation, and more.
CJS/ESM ANSI color library for terminals, CI and Chromium-based browser consoles. Compatible with Bun, Deno, Next.JS.
Visualize Your Colors & Fonts On a Real Site.
Choosing colors or typography for your website? Use the Toolbar below to realize your choices.
A Color Palette Generator (courtesy of MailChimp). Building out a website or brochure based heavily on an image? With Pictaculous, you can simply upload that picture and the app will spit out a color palette that pairs perfectly with it.
wallust is a command line tool for creating 16 color palettes, since it was the original intent of pywal, the tool that inspired the creation of wallust.
🎨 Generate and change color-schemes on the fly.
Pywal is a tool that generates a color palette from the dominant colors in an image. It then applies the colors system-wide and on-the-fly in all of your favourite programs.
Tailwind CSS Color Generator
Press spacebar, enter a hexcode or change the HSL values to create a custom color scale.
Design Seeds is candy for your eyeballs. Pairing beautiful photography with pleasing palettes, you can’t help but feel inspired while scrolling through this site. Click on a favorite color or search by theme to filter down your feed. Follow them on Instagram for an extra daily dose.
themer takes a set of colors and generates themes for your development environment (editors, terminals, wallpapers, and more).
All in one resource for finding everything about colors. Thousands of beautiful color palettes you can use it directly by one click.
The Color Wizard is a color matching application for anyone who wants to create designs with great looking colors.