Color Tools
30 toolsColor converters, palette generators, contrast checkers, gradients.
Color work bounces between formats, palettes, and accessibility checks, and these tools cover the whole loop. Convert between HEX, RGB, and HSL, build palettes and gradients, then verify contrast before anything ships.
There is also a large set of CSS generators for shadows, animations, clip paths, and layout, so you can design an effect visually and copy out production-ready code.
Most popular
Convert & Identify
- Color Converter Pick a color visually or type any format: HEX, RGB, HSL, HSV, or CMYK. See all formats at once with copy buttons. Find the closest CSS named color and Tailwind shade. All processing is local.
- Color Name Finder Enter any hex, RGB, or CSS color and instantly find its exact or nearest CSS named color. See the 5 closest matches with swatches. Free, browser-only.
- Color Temperature Convert color temperature in Kelvin to an RGB color value. Visualize warm candlelight, daylight, and cool sky temperatures.
- Color Reference Library Browse 130+ named CSS colors with hex, RGB, and HSL values. Filter by color group or search by name.
Palettes, Gradients & Patterns
- Palette Generator Generate harmonic color palettes: complementary, analogous, triadic, tetradic, monochromatic, and split-complementary. Export as CSS variables or JSON.
- Tints & Shades Generate tints (lighter) and shades (darker) of any color. Copy hex codes for full color scales. Perfect for design systems and CSS custom properties.
- Color Mixer Mix any two colors together using RGB, HSL, or pigment-style blending. Adjust the ratio and copy the result as hex, RGB, or HSL.
- Gradient Generator Build CSS linear, radial, and conic gradients visually. Adjust color stops, angle, and position, then copy the ready-to-use CSS code.
- Gradient Generator Create beautiful mesh, conic, radial, and linear CSS gradients in your browser. Pick colors, adjust positions, and copy the generated CSS.
- SVG Blob Generate random organic blob shapes as SVG or CSS clip-path. Copy for use in designs.
- SVG Patterns Generate repeating SVG patterns (dots, lines, grids, etc.) as background tiles. Copy the SVG.
Accessibility & Vision
- Contrast Checker Check WCAG 2.x contrast ratio between any two colors. Instant pass/fail for AA and AAA levels across normal text, large text, and UI components.
- Color Blindness Simulate how colors and images appear under protanopia, deuteranopia, tritanopia, and achromatopsia.
- Hue Vision Test Test your colour vision and hue discrimination with an FM100-inspired online test. Arrange coloured chips in order of hue - the lower your score, the better your colour perception.
CSS Layout & Effects
- CSS Grid Visually build CSS grid layouts. Define rows, columns, and gaps, then copy the generated CSS.
- Flexbox Experiment with all CSS flexbox properties in a live playground. Copy the generated CSS.
- Box Shadow Visually build CSS box-shadow declarations with multiple layers. Adjust offsets, blur, spread, color, and opacity.
- CSS Filter Generator Visually adjust blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia to generate a ready-to-use CSS filter property.
- CSS Animation Build CSS @keyframes animations visually and copy the generated CSS code.
- Bezier Editor Drag control points to craft a cubic-bezier() curve and copy it for CSS transitions and animations.
- Clip Path Generate CSS clip-path polygon values with a live visual editor. Copy the CSS instantly.
- Border Radius Set individual corner radii with sliders and see a live preview. Copy the CSS shorthand.
- Glassmorphism Create glassmorphism CSS effects with blur, opacity, and saturation controls. Copy the CSS.
- Neumorphism Generate neumorphic CSS box-shadow effects with live preview. Copy the CSS.
- CSS Loaders Generate pure-CSS loading spinners, dots, bars, and more. Copy the HTML and CSS.
- CSS Button Generator Design custom CSS buttons with live preview. Control background, text, hover colors, border-radius, padding, font size, shadows, and more. Generates clean HTML and CSS ready to paste.
- CSS Triangle Generator Generate pure CSS triangles and arrows in any direction without images or SVG. Adjust size, color, and direction, then copy the CSS class ready to paste into your stylesheet.
- Scrollbar Styler Design a custom CSS scrollbar with live preview. Control width, track color, thumb color, hover color, and border-radius. Generates webkit and Firefox CSS ready to copy.
- Scroll Playground Experiment with CSS scroll-snap-type, scroll-snap-align, and scroll-behavior in an interactive playground. Copy the generated CSS for your project.
- Toggle Switch Generator Design a custom CSS toggle switch with live preview. Set track colors, thumb size, animation speed, and labels. Generates ready-to-use HTML and CSS with no JavaScript required.
No tools match your filter.
Try a different keyword, or clear the filter.