My Tool Studio
18 tools · For designer

Color & Design

Color tools for designers, pick, blend, extract from images, check WCAG contrast, build palettes, convert between HEX/RGB/HSL/CMYK, simulate color blindness.

Color Picker

Pick colors with HSL/RGB/HEX values

Color

Color Palette Generator

Generate harmonious palettes

Color

Color Contrast Checker

Test WCAG color contrast

Color

HEX to RGB

Convert HEX to RGB

Color

RGB to HEX

Convert RGB to HEX

Color

HEX to HSL

Convert HEX to HSL

Color

HSL to HEX

Convert HSL to HEX

Color

Color Blender

Mix two colors visually

Color

Image Color Extractor

Extract palette from an image

Color

Shades & Tints

Build shades and tints of a color

Color

Color Wheel

Visual color wheel

Color

CMYK Converter

Convert RGB to CMYK

Color

Pantone Color Lookup

Find Pantone equivalents

Color

Color Names Lookup

Find names for any color

Color

Color Blindness Simulator

Simulate color blindness

Color

Tailwind Color Picker

Browse Tailwind colors

Color

Material Design Colors

Browse Material colors

Color

Gradient Preview

Preview CSS gradients

Color

About Color & Design

The color category is your kit for picking, converting, and combining colors. Grab a shade with the Color Picker, build a scheme with the Color Palette Generator, or pull a palette straight out of a photo with the Image Color Extractor. Converters handle HEX to RGB, RGB to HEX, and HSL both ways, and the Color Contrast Checker confirms a pair passes WCAG. If you want a css code generator for gradients specifically, the Gradient Preview here outputs ready CSS, and the full CSS Gradient Generator lives in the CSS category. Tailwind and Material palettes are here too.

Common questions

Is there a CSS gradient maker in the color category?

The Gradient Preview in this color category is a lightweight css gradient maker: set your stops and copy the linear, radial, or conic CSS. For a full visual builder with drag handles and more control, use the CSS Gradient Generator in the CSS category. Both give you code you can paste straight into a stylesheet.

Do you have a CSS background gradient generator in the color tools?

For a background, the Gradient Preview outputs a background gradient you can copy as a css property. If you need a dedicated css background gradient generator with layered stops and live editing, the CSS Gradient Generator is the better fit. The color tools focus on choosing the colors that go into the gradient.

Can I build a CSS border gradient with these color tools?

There's no standalone css border gradient generator in the color category, and a border gradient needs border-image or a background trick rather than a plain color value. Use the Color Palette Generator to pick the two colors, then the CSS Gradient Generator in the CSS category to produce the gradient code for your border. That keeps the output honest and copy-ready.