Skip to content
Marvin's Toolbox.

Search tools

Type to filter all tools

Color Palette Generator

Generate color palettes from a base color using real color harmonies like complementary, analogous, triadic and monochromatic tints and shades. Adjust and lock individual colors, then copy the palette as HEX values, CSS variables or Tailwind config.

Everything runs locally in your browser. Your data never leaves your device.

Base color

Harmony

5
0
0

Palette

Lock a swatch to keep its color while you change the base, the harmony or roll a random palette.

on white 1.4:1on black 14.98:1
HEX
#3bf6af
RGB
rgb(59 246 175)
HSL
hsl(157 91% 60%)
on white 1.6:1on black 13.07:1
HEX
#3bdff6
RGB
rgb(59 223 246)
HSL
hsl(187 91% 60%)
Base
on white 3.67:1on black 5.7:1
HEX
#3b82f6
RGB
rgb(59 130 246)
HSL
hsl(217 91% 60%)
on white 6.33:1on black 3.31:1
HEX
#523bf6
RGB
rgb(82 59 246)
HSL
hsl(247 91% 60%)
on white 4.39:1on black 4.77:1
HEX
#af3bf6
RGB
rgb(175 59 246)
HSL
hsl(277 91% 60%)

Export palette

The HEX list and the text file carry one color per line. The CSS export declares --palette-1 through --palette-5on :root, and the Tailwind export is a color scale ready for a theme's colors section.

Next steps

Keep going. These tools open with your result loaded in.

Color Converter

Convert a color between HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH and OKLAB. Type into any field and the others update as you go, or pick the color visually. Reads CSS color syntax and keeps alpha where the format supports it.

convertercolordev

Color Contrast Checker

Check two colors against the WCAG contrast rules. Type or pick a text and a background color, read the contrast ratio, see which AA and AAA checks pass, preview real text at the sizes WCAG distinguishes, and get suggested fixes when a check fails.

devcolor

Text Case Converter

Convert text into every case at once: title case in the APA, AP, Chicago, MLA, Bluebook, AMA and NYT styles, sentence case, upper, lower, camelCase, snake_case, kebab-case and more.

textconverter

Word & Character Counter

Count words, characters, sentences, paragraphs, lines and more as you type, with estimated reading and speaking time.

text

Dedupe Lines

Remove duplicate lines from a list or text, keeping the first occurrence. Optionally ignore case and whitespace, or drop blank lines too.

textdev

Find and Replace

Replace text in two modes: plain find and replace all, or regular expressions with flag controls and capture group references like $1.

textdev

Text Diff

Compare two texts and see every added, removed and changed line highlighted, side by side or inline, with the changed words marked within each line. Ignore case, whitespace or blank lines, read a summary of how much changed, and export the result as a unified diff.

textdev

UUID Decoder

Paste a UUID to see what it carries: version, variant, and for time-based versions the exact timestamp, clock sequence and node. Also shows the raw bytes, the 128-bit integer and the URN form.

devuuid

Base64 Encoder & Decoder

Decode Base64 to text or encode text to Base64. Paste into the top box, read the result below, and flip the direction with one click. Handles Unicode correctly, reads URL-safe Base64, and shows binary payloads as a hex dump you can download.

devconvertertext

About the Color Palette Generator Tool

This tool builds a color palette from one base color using real color harmonies. Pick the base visually or type it in any CSS notation, choose a harmony like complementary, analogous, triadic or monochromatic, and set how many colors you want. Every swatch shows its HEX, RGB and HSL value with a copy button.

Lock the colors you want to keep, then change the base, move the sliders or roll a random palette and only the unlocked swatches change. Saturation and lightness sliders tune the whole palette at once, and each swatch shows its contrast against white and black so you can tell which colors carry readable text.

What you can do

  • Generate a color palette from a single base color.
  • Build complementary, split complementary, analogous, triadic and tetradic color schemes.
  • Create monochromatic palettes and tint and shade scales of a color.
  • Lock individual colors and reroll the rest with a random base.
  • Adjust the saturation and lightness of the whole palette with sliders.
  • Check each color's contrast against white and black at a glance.
  • Copy the palette as a hex list, CSS custom properties or a Tailwind color scale.

How to use the Color Palette Generator

  1. 1Pick a base color with the picker, or paste one in any CSS notation like HEX, RGB, HSL or OKLCH.
  2. 2Choose a harmony and set the number of colors, then fine-tune the palette with the saturation and lightness sliders.
  3. 3Copy single values from a swatch, or export the whole palette as a hex list, CSS variables or Tailwind colors.

How the harmonies work

Harmonies place colors at fixed angles around the color wheel. Complementary uses the hue directly opposite the base, split complementary softens that with the two hues next to the opposite, triadic and tetradic space three or four hues evenly, and analogous stays with the base's neighbors. When you ask for more colors than a harmony defines, the extra swatches are lighter and darker variants of the same hues.

Monochromatic palettes and the tints and shades scale keep the base hue and vary lightness. They are computed in the perceptual OKLCH color space, so the steps between swatches look even to the eye. The tints and shades scale mixes the base toward white and black, which makes it a good starting point for a Tailwind-style color ladder.

Working with the palette

The lock on a swatch pins its color, so you can keep the colors that already work and regenerate around them. To translate a color into another notation, send it to the Color Converter. To test a specific text and background pair, use the Color Contrast Checker. The chips under each swatch only rate a color against pure white and pure black.

If you want a palette from a photo instead of a harmony, the Color Palette Extractor reads one out of an image, and its result can be sent here to use one of its colors as a new base.

Related tools

Color Contrast Checker

Check two colors against the WCAG contrast rules. Type or pick a text and a background color, read the contrast ratio, see which AA and AAA checks pass, preview real text at the sizes WCAG distinguishes, and get suggested fixes when a check fails.

devcolor

Color Converter

Convert a color between HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH and OKLAB. Type into any field and the others update as you go, or pick the color visually. Reads CSS color syntax and keeps alpha where the format supports it.

convertercolordev

CSS Gradient Generator

Build linear, radial and conic CSS gradients visually: add and drag color stops, set the angle or center, preview the result live and copy the generated CSS. Includes ready-made presets to start from.

devcolor

Aspect Ratio Calculator

Enter a resolution to get its simplified aspect ratio, or start from a ratio and one side to get the missing dimension. Knows the common ratios like 16:9, 4:3 and 21:9 and shows how close your size is to each.

calculatorimagedev

Barcode Generator

Create barcodes in dozens of formats, from EAN-13, UPC-A and Code 128 to QR Code, Data Matrix and PDF417. Type the content, tune the size, colors and text options, and download the result as PNG or SVG.

mediaimagedev

Base64 Encoder & Decoder

Decode Base64 to text or encode text to Base64. Paste into the top box, read the result below, and flip the direction with one click. Handles Unicode correctly, reads URL-safe Base64, and shows binary payloads as a hex dump you can download.

devconvertertext