Categories
Art and Design Resources and Reference Websites

Web Design Tools

Color

Accessible Palette – Create color systems with consistent lightness and contrast

Accessible Color Generator – Show me the closest variations of COLOR that contrast against BACKGROUND COLOR enough to meet ACCESSIBILITY GUIDELINES

Contrast Grid – Test many foreground and background color combos for compliance with WCAG 2.0 minimum contrast.

Coolers – color palette generator

Optimal Overlay Finder – For Readable Text on a Background Image

Vivid Gradient Generator – we interpolate the gradient in a hue-based color system, such as HCL, HSB, or HCL (not RGB) đŸ¤“. This avoids the line of gray that goes through the center of every color space.

Gradient Easing Generator – Create and preview your own easing gradients in CSS.

Typography

The Good Line-Height – the good line-height calculates the exact number so it always fits the baseline grid!

Graphics

Clippy – The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.

Hero Generator

Layout

Flexbox Patterns – Flexbox is awesome, but it introduces many new concepts that can make it difficult to use. These interactive examples will show you practical ways to use it to build UI components.

Tools

Tiny Helpers – single task tools

Omatsuri – Open source browser tools for everyday use

Reference

Web Skills – reference deck with links to explain a variety of web elements

CSS-only Carousel

By Tracy Durnell

Writer and designer in the Seattle area. Freelance sustainability consultant. Reach me at tracy.durnell@gmail.com. She/her.

One reply on “Web Design Tools”

Leave a Reply

Your email address will not be published. Required fields are marked *