Image Color Palette Extractor
Extracts prominent colors from an image and provides color values for design reuse.
Content hub · 19 tools
Design
Small tools for color values, contrast, and interface details that need quick checking.
Check color and readability
The Design group helps convert color values, check text/background contrast, extract colors, and test scrollbar styling for more readable interfaces.
Use this group when
- Convert HEX, RGB, and HSL while designing UI.
- Check text and background contrast.
- Try color or scrollbar values before adding them to CSS.
Tool list
Color Converter
Converts colors between HEX, RGB, and HSL with a quick color preview.
Color Contrast Checker
Checks WCAG contrast ratio between text and background colors to review readability.
Scrollbar Customizer
Generates custom scrollbar CSS and previews it live before adding it to an interface.
CSS Gradient Generator
Creates linear or radial gradients with a visual preview and copyable CSS background output.
Box Shadow Generator
Creates soft shadows for cards, panels, or buttons with x, y, blur, spread, and opacity controls.
Border Radius Generator
Adjusts each corner radius with a shape preview and copyable border-radius CSS.
Glassmorphism Generator
Creates frosted glass UI effects with transparent backgrounds, blur, border, radius, and shadow.
Neumorphism Generator
Creates subtle raised or pressed neumorphic effects from base color, shadow distance, and blur.
CSS Clamp Font Generator
Generates responsive font-size clamp() formulas based on minimum and maximum viewport widths.
Fluid Spacing Generator
Generates responsive padding, margin, or gap values with clamp() for flexible layouts.
Color Scale Generator
Generates a 50-950 color scale from one base color for UI color tokens.
Accessible Palette Builder
Checks contrast ratios and suggests readable text colors for the selected background.
UI Color Token Generator
Generates CSS variables for primary, accent, surface, and text colors in light/dark themes.
SVG Optimizer
Cleans SVG by removing XML headers, comments, metadata, and unnecessary whitespace.
SVG to Data URI Converter
Converts SVG into a data URI for CSS background or HTML embedding.
Favicon Helper
Generates favicon, apple-touch-icon, manifest, and theme-color snippets.
CSS Grid Generator
Generates responsive CSS Grid layouts with columns, minmax, gap, and visual preview.
Flexbox Playground
Tests flex-direction, wrap, justify-content, align-items, and gap with a visual preview.
Frequently asked questions
Do color tools support accessibility checks?
Yes. The contrast checker helps quickly review readability between text and background colors.
