THE SMALL DETAILS STUDIO

Color and CSS tools
for real UI work.

Pick and convert colors, make a palette, check contrast, sample images, and generate CSS. Useful tools, free to use without an account.

08focused tools
one better workflow

01 / THE TOOLBOX

Color tools.

Choose colors, build a UI palette, and check text contrast.

Online Color Picker

Choose a color and copy its HEX, RGB, HSL, or OKLCH value.

Open tool

Color Name Finder

Find the nearest familiar color name, inspect its formats, and view a shade ramp.

Open tool

WCAG Contrast Checker

Test a text and background color pair against WCAG AA and AAA contrast thresholds.

Open tool

UI Color Palette Generator

Generate a starting color palette, inspect its swatches, and copy values for a project.

Open tool

02 / THE TOOLBOX

Image tools.

Sample one pixel or extract a set of colors from an image.

Image Color Palette Extractor

Extract a set of prominent colors from a photo, illustration, or reference image.

Open tool

Image Color Picker

Upload an image and sample a specific pixel to get its color values.

Open tool

03 / THE TOOLBOX

CSS tools.

Create CSS gradients and box shadows, then copy the code.

CSS Gradient Generator

Build a CSS gradient, preview the transition, and copy the generated CSS.

Open tool

CSS Box Shadow Generator

Adjust shadow layers visually and copy the CSS box-shadow declaration.

Open tool

FROM COLORS TO A COMPLETE THEME

See your choices
come to life.

Open the editor to preview a palette and font pairing across real app layouts, then export CSS for your project.Open the theme editor

KEEP EXPLORING / PRACTICAL GUIDES

How to Build a UI Color Palette from One Brand ColorWCAG Color Contrast: AA Ratios, Exceptions, and a Testing WorkflowCSS Gradients for UI: Color Stops, Direction, and Readability