Color Tools Directory

Create blurry, multi-color mesh gradients by dragging color points. Tune blur, blend mode and grain, then copy CSS, Tailwind or SCSS, or download SVG and PNG.

Pick a color on an interactive HSV color wheel, see ten harmony types as markers, check WCAG contrast and export the palette as CSS, SCSS or JSON.

Create linear, radial and conic CSS gradients with up to 8 color stops, check text contrast, and export CSS, Tailwind, SCSS, SVG, PNG or JSON.

Set 13 color roles for light and dark mode, preview them on buttons, cards and alerts, check WCAG contrast, then copy CSS variables, Tailwind or SCSS tokens.

Blend two to ten colors by weight and copy the mixed color as HEX, RGB, HSL, OKLCH or CSS color-mix() code. Helps designers and developers find midpoints, tints and shades.

Mix CMYK ink percentages, preview the screen and coated-paper print color, check total ink coverage and copy HEX, RGB or HSL values. Built for print designers.

Generate 11 types of color harmony from one base color in HSL or OKLCH, preview them on a sample interface and export CSS, SCSS, Tailwind, JSON or SVG.

Turn a mood or industry into an editable color palette with Google Font pairings, a live UI preview with contrast checks and one-click CSS variables.

Swirl liquid ink on digital paper and make suminagashi-style marbling art. Choose your inks, flow them with mouse, touch or keyboard, and download a PNG.

Create a two-color duotone effect on any photo in your browser. Pick shadow and highlight colors, compare with the original, then download a PNG or copy the SVG filter and CSS.

Generate an 11-step 50 to 950 tint and shade scale from one base color. Copy CSS, SCSS, Tailwind or JSON tokens and check white and black text contrast for every stop.

Create looping CSS animated gradients with 2 to 8 colors, linear or radial type, motion, speed and easing. Copy CSS or Tailwind code, download it or share a link.

Press Space to shuffle harmonious 2 to 8 color palettes, lock favorites, and export CSS, SCSS, Tailwind or JSON. Free random color scheme generator for designers and developers.

Build tileable SVG background patterns with custom colors, scale, stroke, rotation and opacity. Copy CSS or a data URI, or download SVG and PNG. Free for designers and developers.

Design CSS box-shadow and text-shadow stacks with sliders and a live preview, then copy CSS, a Tailwind class or an SCSS variable. Built for web designers and developers.

Build frosted glass cards with adjustable blur, transparency, saturation, border and shadow. Preview on eight backdrops, check text contrast and copy CSS, Tailwind or SCSS.

Design neumorphic soft UI surfaces visually and copy production-ready CSS. Shadows come from one base color, with four shapes and built-in contrast checks.

Create CSS gradient text with custom color stops, angle, fonts and size, check its contrast on your background, and copy CSS, Tailwind, SCSS or HTML.

Upload, paste or link a photo and get a 3 to 12 color palette with HEX codes, share percentages and contrast badges. Edit, lock and export for designers and developers.

Upload, paste or link an image, click any pixel and copy its HEX, RGB, HSL, HSV, CMYK or OKLCH value. Includes a zoom loupe, pixel averaging, WCAG contrast and dominant colors.

Compare two colors side by side and measure the Delta E difference, lightness, chroma and hue shifts and WCAG contrast. Built for designers, developers and brand teams.

Preview one color on buttons, forms, cards, charts and alerts in light and dark mode. Check WCAG contrast, simulate color blindness and export CSS variables.

Paint a door, dress, armchair, van and phone case photo in any color with shadows and highlights intact. Helps designers, homeowners and brands preview color choices.

Extract the main colors from any public website or image URL as named swatches with HEX, RGB, HSL and WCAG badges, then export as CSS, SCSS, Tailwind or JSON.

Browse the Pantone Color of the Year archive and curated trend palettes for UI, branding and fashion. Copy colors as HEX, RGB or HSL, or export CSS and JSON.

Analyze the color distribution of any image with hue, saturation and lightness histograms, dominant colors, color families and tonal balance. Export the report as JSON or PNG.

Paste any public website URL to extract its brand colors as a ranked, editable HEX palette. Export CSS, SCSS, Tailwind or JSON. Built for designers and developers.

Check whether text is readable on its background with WCAG 2 ratios, APCA Lc scores, a type scale preview and fix suggestions. Built for designers, developers and accessibility reviewers.

Upload an image to find its dominant colors with HEX, RGB, names and coverage percentages. Export CSS, JSON or PNG for palettes, branding and UI themes.

Extract a color scheme from any image or screenshot. Get 6 to 10 named dominant colors, assign background, text, primary and accent roles, and export CSS, SCSS, Tailwind or JSON.

An interactive color psychology guide with emotions, cultural meanings, branding examples and contrast checks for 11 color families. Helps designers and marketers choose colors.

Convert any color between HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH and Lab, edit channels, check contrast on white and black, and export CSS, JSON or Tailwind code.

Convert HEX codes to HSL with classic, modern and exact 1-decimal syntax. Adjust sliders, build a lightness scale and export CSS, SCSS or JSON for your designs.

Free online HEX to HSV converter. Turn any 3, 4, 6 or 8 digit HEX code into hue, saturation and value (HSB) and copy matching RGB and HSL values.

Convert OKLCH colors to HEX, RGB, HSL and Display P3 with live sliders, gamut mapping and WCAG contrast. Built for designers and developers moving to modern CSS.

Convert HEX color codes (3, 4, 6 or 8 digits) to RGB and RGBA with percentages, HSL, contrast checks and CSS, SCSS or JSON export. Built for designers and developers.

Convert HEX codes to approximate CMYK percentages with a total ink coverage check, a print gamut estimate, RGB and HSL values, and CSS or JSON export. Built for print and web designers.

Convert RGB and RGBA values to HEX color codes with sliders, a live preview, short and 8-digit HEX output, contrast checks and CSS, JSON or SVG export for designers and developers.

Free Pantone converter that turns Pantone Solid Coated codes into approximate HEX and RGB, or finds the closest PMS match for any HEX with a ΔE2000 score.

Convert RGB or HEX colors to approximate CMYK for print. Shows a gamut warning, total ink coverage and the formula steps for designers, developers and marketers.

Finds the closest CSS named color for any HEX, RGB or HSL value, scores the match with a perceptual distance, and lists all 148 CSS color keywords to copy.

Name your HEX colors and export them as CSS custom properties, SCSS, Tailwind v4 or v3, DTCG JSON, JavaScript, SwiftUI or Android XML. Built for designers and developers.

Free HSL to HEX converter that turns hue, saturation and lightness into HEX and RGB codes with a live preview, alpha support and one-click copy for designers and developers.

Free contrast checker that tests text and background colors against WCAG 2.2 AA and AAA, shows the APCA score and suggests accessible fixes for designers and developers.

Preview how images and colors look with protanopia, deuteranopia, tritanopia or achromatopsia, and flag color pairs that become hard to tell apart. Free, in your browser.

Test the WCAG contrast ratio of any two colors with AA and AAA badges, a live UI preview and nearby compliant color suggestions. Built for designers and developers.

A free color blindness test with 12 number plates, a 15-cap hue arrangement and vision simulations. Learn how you see color, then copy or download an activity summary.

Test every text and background pair in a color palette for WCAG AA and AAA contrast, see failing pairs with fixes, and export results as CSV, JSON or CSS.

Simulate a palette under eight color vision types, find pairs that look alike, and auto-fix unlocked colors. Built for designers and developers who need a color blind friendly palette.

Build a full UI palette and test every foreground and background pairing against WCAG AA and AAA contrast, then export CSS, SCSS, JSON or Tailwind code.

Audit up to 10 palette colors against WCAG AA and AAA. Get a contrast matrix, safe text colors per background and same-hue fixes for failing pairs.

Check keyboard focus ring color, width, style and offset against WCAG 2.2 contrast and area rules, with a live Tab preview and CSS output for designers and developers.

Test OKLCH, OKLab, HEX and Display P3 colors against sRGB, Display P3 and Rec.2020, view the gamut map and snap colors back in gamut. Built for designers and developers.

Build a WCAG contrast matrix for up to 20 palette colors and see which text and background pairs pass AA or AAA. Built for designers and developers who need safe color combinations.

Build a CSS theme with light and dark mode custom properties from one brand color. Preview it, check WCAG contrast and export CSS, Tailwind or JSON tokens.

Blend 2 to 8 colors in sRGB, HSL, Lab, LCH, OKLab or OKLCH, compare spaces side by side and export CSS gradients, color-mix() values, HEX, SCSS or JSON.

Find the closest name for any HEX, RGB, HSL or CSS color, with a Delta-E accuracy score and alternative names. Helps designers, developers and writers label colors fast.

Create a color collaboration room, invite teammates with one link, and co-edit a shared palette of up to 20 colors. Export CSS, SCSS, Tailwind or JSON tokens.

A free color guessing game: pick the hex code that matches today's swatch from four options, score points, keep a streak and play unlimited practice rounds.

Generate a Tailwind CSS color scale from one base color, check WCAG contrast on every shade and export Tailwind v4, v3, CSS, SCSS or JSON code.

Pair Google Fonts for headings and body text, preview them on landing page, blog and dashboard layouts with your colors, check WCAG contrast and export CSS.

Enter any color and get the nearest tokens from CSS named colors, Tailwind, Material Design, Open Color and Bootstrap, ranked by ΔE with contrast ratios. Built for designers and developers.

Paste up to 500 colors in any mix of formats and convert them all to HEX, RGB, HSL, HSV, HWB, CMYK or OKLCH. Built for designers and developers who handle color lists.

Build a color palette widget with named swatches, then copy plain HTML to embed it on a blog, docs site or portfolio. No scripts, no iframe, no signup.

Reference for Bootstrap 5.3 colors: theme colors, dark mode tokens and 100 to 900 scales with HEX, SCSS and CSS variables, plus a closest-color finder and code export.

Searchable RAL Classic color chart with codes, English names and approximate sRGB HEX. Find the closest RAL match to any HEX and export CSV, JSON, CSS or SCSS.

Browse the Material Design 2 palette, copy HEX, RGB, CSS variable, SCSS or Android values, and export whole hues. Built for designers and developers.

Browse every default Tailwind CSS color with shades 50 to 950. Copy classes, OKLCH, HEX, RGB or CSS variables, compare v4 and v3, and export the palette for your project.