Gradient Palette Extractor
Extract and normalize colors from CSS gradients or lists.
Works Offline
Privacy First
No Login
No API
Paste CSS colors or a palette list
Extracted colors (3)
#6366f1
#ec4899
#f97316
JSON export
About the Gradient Palette Extractor
Paste CSS gradient code, a list of color values, or free-form text containing colors, and get a deduplicated, sortable swatch grid with copyable hex tokens and a JSON export.
Examples
Linear gradient
linear-gradient(90deg, #6366f1 0%, #ec4899 100%)Output
#6366f1, #ec4899Keyboard shortcuts
- Copy the main outputCtrl / ⌘ + Shift + C
- Download the resultCtrl / ⌘ + S
- Share this toolCtrl / ⌘ + Shift + S
- Reset the inputsAlt + R
- Open the tool search paletteCtrl / ⌘ + K
Related tools
Color Blindness Simulator
Color
Simulate how a palette looks with common color vision deficiencies.
Color Converter
Color
Convert colors between HEX, RGB, HSL, HWB, OKLCH and CMYK.
Color Mixer
Color
Blend two colors with a ratio slider and preview CSS blend modes.
Contrast Checker
Color
Check WCAG 2.1 contrast ratio between two colors.
Hex to SwiftUI & UIColor Converter
Color
Turn a hex color into SwiftUI, UIKit and asset catalog code.
Palette Generator
Color
Generate complementary, analogous, triadic and other palettes.
Frequently asked questions
Version 1.0.0 · Updated 2026-08-06 · Runs entirely in your browser