Color Tools
Colour tools support the stage of a design where a scheme is being chosen and then written into code. Web designers, brand builders, slide makers and front-end developers move between them while settling on a look. Start with the Color Palette Generator when you have nothing fixed yet. It proposes sets of colours that work together, so you can judge combinations rather than single swatches, and it is the fastest way past a blank page. When one colour is already decided, perhaps from a logo or a photo, the Color Picker lets you select an exact shade and read off its value in several notations. The Hex to RGB Converter bridges the formats: hex codes are what designers exchange, but RGB values are what you need for transparency, for canvas work and for many design applications. Converting by hand is error-prone, so it is worth the extra click. The Gradient Generator blends two or more of your chosen colours and produces the CSS for the result, including direction and stops, which can be pasted straight into a stylesheet. A common sequence is to generate a palette, pick and refine one accent, convert it to the notation your code needs, then build a gradient from the pair. Everything runs locally in your browser.
4 tools available
Showing 1–4 of 4
Color Palette Generator
Build a coordinated colour palette from a base shade and copy every hex code for CSS or design work.
Hex to RGB Converter
Convert hex to RGB and HSL, view each channel, and copy the matching CSS colour declarations.
Color Picker
Choose a colour and copy it in HEX, RGB, RGBA, HSL or HSV, with sliders for each channel.
Gradient Generator
Design linear, radial or conic CSS gradients with live preview and copy the generated background property.
The CSS gradient syntax this tool produces
A linear gradient runs colours along a straight line: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%). The angle controls direction, with 0deg pointing to the top and values increasing clockwise, so 90deg points right and 180deg points down. Keywords such as to bottom right are equivalent alternatives.
A radial gradient radiates from a centre point outward: radial-gradient(circle farthest-corner at center, #4f46e5 0%, #ec4899 100%). The shape is a circle or an ellipse, and the size keywords closest-side, closest-corner, farthest-side and farthest-corner determine where the final colour stop lands relative to the container's edges.
A conic gradient sweeps colours around a centre point like a pie chart: conic-gradient(from 45deg at center, #4f46e5 0%, #ec4899 100%).
In all three, colour stops carry a position from 0 to 100 per cent, and the browser interpolates smoothly between adjacent stops. Stops with reduced opacity are written as rgba values.
Worked example: building a three-stop diagonal gradient
background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
Now add a third stop of #f59e0b at 50 per cent. The output becomes linear-gradient(135deg, #4f46e5 0%, #f59e0b 50%, #ec4899 100%), and the preview shows the amber band cutting across the middle of the diagonal. Move that stop to 25 per cent and the amber shifts towards the indigo end, compressing the indigo-to-amber transition into the first quarter and stretching the amber-to-pink transition across the remaining three quarters.
Switching the type to radial with a circle shape and farthest-corner sizing produces radial-gradient(circle farthest-corner at center, #4f46e5 0%, #f59e0b 50%, #ec4899 100%), which turns the same three colours into concentric rings. Switching to conic with a start angle of 0deg wraps them around the centre instead, producing a colour wheel segment effect.
Using the gradient in a real layout
For gradient text, apply the gradient as the background, then add background-clip: text and color: transparent. Include the -webkit-background-clip prefix for wider support, and always check the contrast of the darkest stop against the page behind it.
Banding is the most common visual problem. Gradients between two very close colours across a wide area produce visible steps because of 8-bit colour quantisation; adding an intermediate stop or a very subtle noise overlay usually hides it.
Conic gradients are the right tool for pie charts, loading rings and colour pickers, but they arrived later than the other two, so verify support if you need to cover older browsers. Finally, be careful placing text over a multi-stop gradient: contrast that passes at one end of the sweep often fails at the other.