Color Studio
Pick colors, build palettes, gradients, contrast checks and image color extraction.
HEX #B8F13A
RGB 184, 241, 58
Contrast ratio 13.61:1
CSS linear-gradient(135deg, #B8F13A, #111520)
border-radius: 24px
box-shadow: 0 12px 24px #B8F13A44
clamp: clamp(1rem, 2vw + 1rem, 3rem)
grid: repeat(auto-fit, minmax(220px, 1fr))
Good to know
Can I extract image colors?
Yes. The image is sampled in the browser using canvas.
How to use
1. Add input
Paste or type the content you want to process.
2. Configure
Choose the appropriate output options.
3. Get the result
Run the tool, review the result, then copy or download it.
FAQ
Which color values are shown?
The first color is shown as HEX and as RGB. The second color is used for the gradient and the contrast check. This page does not calculate HSL.
How is the contrast ratio calculated?
It uses the WCAG relative-luminance formula between the two colors and prints the ratio with two decimal places, such as 4.52:1. The page does not label the pair as AA or AAA.
Which CSS values follow my sliders?
The preview prints a linear-gradient at the angle you set, from 0 to 360 degrees, a border-radius from 0 to 80 pixels, and a box-shadow of the form 0 half-the-blur blur yourcolor44. The clamp and grid lines on the card are fixed examples, not values computed from your colors.
How are colors taken from a picture?
The picture is drawn onto a 64 by 64 canvas in your browser and sampled sparsely. Up to 12 distinct hex colors appear as swatches. It is a quick sample, not a clustered dominant-color analysis, and the file is not uploaded.
How do I copy a swatch?
Click it. The hex value is written to your clipboard. The two chosen colors and any colors sampled from an image can all be copied this way.