Color Picker & Generator
Our free online tool helps you pick, convert, and generate colors for your design and development projects. Easily switch between HEX and RGB formats, copy color codes, and create beautiful color schemes.
Color and design helper tools
Design tools help you choose colours and build the visual style of a website or app. They are useful for web designers, front-end developers and anyone creating graphics, presentations or social media posts.
Use the Color Picker & Generator to pick any colour and convert between HEX and RGB values. The Color Shades Generator creates a full range of lighter and darker versions of a colour, which is ideal for building a consistent colour palette or design system. The CSS Gradient Generator lets you blend colours into linear or radial gradients and copy the CSS code straight into your project.
Our free online tool helps you pick, convert, and generate colors for your design and development projects. Easily switch between HEX and RGB formats, copy color codes, and create beautiful color schemes.
NinjaFunction's Color Contrast Checker compares a text colour with a background colour and shows the contrast ratio from 1:1 to 21:1. It tells you at once whether the pair passes WCAG AA and AAA for normal text, large text and interface parts such as buttons and icons, shows a live preview, and suggests a nearby colour that passes when yours fails. It runs in your browser, so nothing is sent to a server.
NinjaFunction's CSS Box Shadow Generator lets you design a shadow by moving sliders for offset, blur, spread and opacity, and see the result on a live preview box. Add up to five layers, switch to an inset shadow, start from ready presets such as Soft, Layered or Glow, change the box and page colours, and copy the finished CSS in one click. It runs in your browser, so nothing is sent to a server.
NinjaFunction's Color Palette Generator builds a five-colour palette from one base colour. Choose complementary, analogous, triadic, split complementary, tetradic or monochrome harmony, press Random colour for new ideas, click any colour to copy its HEX code, and copy the whole palette as a list or as CSS variables. It runs in your browser, so nothing is sent to a server.
NinjaFunction's Color Palette from Image finds the main colours of any picture. Choose how many colours you want from 3 to 10, see each one with its HEX and RGB code and its share of the picture, click a colour to copy it, and click anywhere on the picture to pick the exact colour of that spot. Copy the palette as a list or as CSS variables. The colours are found in your browser, so your picture is never uploaded to a server.
NinjaFunction's Favicon Generator turns a logo, a picture, a letter or an emoji into everything a website needs: a favicon.ico with 16, 32 and 48 pixel icons, PNG icons for browsers, an Apple touch icon and Android icons. Crop or fit your picture, choose a square, rounded or circle shape, add a background colour, check every size in the previews, and copy the HTML code. Download single files or a ZIP. The icons are made in your browser, so your image is never uploaded to a server.
NinjaFunction's CSS Gradient Generator lets you design linear, radial and conic gradients with multiple color stops and a live preview. Copy the ready-to-use CSS declaration, download the gradient as a PNG, or start from a preset. Everything runs locally — nothing is uploaded.
NinjaFunction's Color Shades Generator produces 7 shades (three darker, the base, three lighter) from any color you pick. Each shade shows its HEX and RGB value with a one-click Copy button. Copy the entire palette as CSS variables with a single click. Everything runs locally in your browser.
Frontend vs Backend development explained in plain English. Compare languages, frameworks, salaries, and career paths to decide which one is right for you.
Learn how to speed up a slow website with 10 proven tips. Understand Core Web Vitals, image optimization, caching, and CDN strategies to boost performance and SEO in 2026.
Start with one main brand colour, then create lighter and darker shades of it for backgrounds, borders and hover states. Add one accent colour for buttons and links, and a set of neutral greys for text. The Color Shades Generator makes the shades for you.
A CSS gradient is a smooth blend between two or more colours, created with code instead of an image. Because it is drawn by the browser, it loads instantly and looks sharp on every screen size.
Both work in every modern browser. HEX codes are shorter and common in design handoff, while RGB is useful when you need transparency with rgba(). Use whichever your team or design tool prefers.