Goodfolk Toolbox

Design Utilities

Free design tools for colors, contrast, gradients, shadows, spacing, typography, and UI layout.

Use free design utilities for colors, contrast, palettes, gradients, shadows, border radius, spacing, typography, rem conversions, and image aspect ratios. These tools are built for UI design, front-end development, branding, and quick visual decisions. Goodfolk Design Utilities help you preview values, copy CSS-friendly output, and make cleaner design choices without opening a full design app. All tools are free, fast, browser-based, and require no signup.

HEX Color Converter

Convert HEX colors to RGB and HSL, preview the color, and copy CSS-friendly values.

Color Contrast Checker

Check contrast between text and background colors and see basic WCAG-style pass/fail guidance.

Color Palette Generator

Generate color palettes from a base color, lock favorite colors, and copy HEX values or CSS variables.

CSS Gradient Generator

Create linear CSS gradients, preview them, and copy ready-to-use CSS.

Box Shadow Generator

Create CSS box shadows, preview them, and copy ready-to-use shadow styles.

Border Radius Previewer

Preview CSS border radius values on cards and buttons, then copy ready-to-use CSS.

Spacing Scale Generator

Generate consistent spacing scales in pixels and rems for UI layouts and design systems.

REM/PX Converter

Convert pixels to rems and rems to pixels using a custom base font size.

Typography Scale Calculator

Generate a type scale from a base font size and ratio, with pixel and rem values.

Image Aspect Ratio Calculator

Calculate missing image dimensions, aspect ratios, and scaled sizes for UI layouts and media.