In-browser

Tier List Maker

design

Create custom drag-and-drop tier rankings with custom colors and labels.

Tier Controls

S
A
B
C
D
F
Drag Pool (Drag images to rows)

Upload images on the left, then drag them into the rows above.

Instructions & Drag and Drop Details

  • Upload Images: Click "Select Local Images" to populate the pool at the bottom. Supported formats: JPG, PNG, WebP, SVG.
  • Drag & Drop: Drag any item from the pool and drop it into S, A, B, C, D, or F rows. You can drag items back to the pool or move them between rows.
  • Layout Customization: Color-code your tiers by selecting the color box on the customizer block to change row colors.

🔒 This tool runs entirely in your browser. Nothing is uploaded or sent to any server.

How to Use the Tier List Maker

  1. 1Pick or input your color HEX/RGB values, or upload an image to inspect.
  2. 2Adjust gradients, sliders, or colors to see real-time updates.
  3. 3Copy the generated CSS code, gradient stylesheets, or contrast ratios.
  4. 4Use the CSS directly in your web design or software project.

Why Use Our Tier List Maker

WCAG CompliantContrast checker uses official WCAG 2.1 formulas to verify AA and AAA readability.
CSS ReadyGenerate linear and radial gradients and copy clean, pre-fixed CSS.
Offline Image Color PickerLoad images and pick colors locally using browser canvases.

Frequently Asked Questions

Q:Does the Contrast Checker verify WCAG standards?

A:Yes. It checks your foreground and background colors and calculates relative luminance to verify compliance with WCAG AA and AAA standards.

Q:How does the Gradient Generator export codes?

A:It generates standard CSS styles (e.g. linear-gradient) with custom angles and color stops, ready to copy and paste into your project.

Q:Can I extract a color palette from my photos offline?

A:Yes, the Palette Extractor parses image pixel data locally to cluster and extract dominant color palettes.

Related Utilities

design

Color Picker & Palettes

Inspect colors, generate matching palettes, and copy HEX/RGB/HSL values.

design

CSS Gradient Generator

Visually edit linear and radial gradients and copy clean CSS code.

design

Color Contrast Checker

Verify color contrast accessibility ratios for WCAG compliance.

design

Fake Chat Generator

Create realistic chat screenshots for WhatsApp or Instagram.