工具箱 #

Moved from 工具箱 - 浣心／Heart of Sleeve.

字体 #

• Google Webfonts Helper
• Canva Font Combinations - 英文字体凑对
• Fonts In Use – Type at work in the real world. - 英文字体组合实例
• Verified Logo Fonts - Font in logo - 品牌标志中的字体
• Home - Free Faces - 一些免费英文字体
• Open Foundry - 一些开源英文字体
• The Ultimate Oldschool PC Font Pack: Font Index - 旧电脑的终端英文字体
• Ugly Gerry - Gerrymandering 字体
• Shake - The Typeface with Parkinson’s
• フォント配布ページ – たぬきフォント - 自由字体设计师
• Maniackers Design - 自由／免费字体设计工作室（需确认商用许可）
• 2020 年用、日本語のフリーフォント 418 種類のまとめ
• RAPTORTYPE - 字体设计师的商店，有免费的
• 〓（ぼんのう）堂 - 字体设计师的商店，有免费的
• Free Fonts | HvD Fonts - 字体设计工作室的商店（免费部分）

配色 #

• Html Colors - 互动色彩教材，色盘不怎么样
• Data Viz Color Palette Generator (for Charts & Dashboards) - 定义两个颜色，然后获得 1 - 6 个过度色
• chroma.js palette helper - 定义 n 个颜色，然后获得 n 个过度色
• Happy Hues - Curated colors in context. - 固定色盘，网页预览
• Tailwind Ink - Colour scheme 生成器
• uiGradients - Beautiful colored gradients - 固定渐变色盘，按主色调区分
• Gradient Colors Collection Palette - CoolHue 2.0 - 固定渐变色盘，有代码和 Figma 插件
• Color Names — HTML Color Codes
• chroma.js palette helper (multi-hued, multi-stops color scales)
  • Repo: gka/palettes: A tool for creating nice, percerptually correct and colorblind-safe color palettes.

A11y #

• Accessible Colors | WCAG 2.0 AA and AAA color contrast checker - 检查对比度，建议一个替换颜色
• Tanaguru Contrast-Finder - 检查对比度，建议一堆替换颜色
• Color.review - 检查对比度，显示色盘，网页预览 (big colour picker with iso-contrast contour lines)
• EightShapes Contrast Grid (cross-check many colours all at once)
• OddContrast (any input, any sliders, any output)
• Colorable (HEX input, HSL sliders)
  • Very similar: Colour Contrast Checker
• WhoCanUse (visual impairment simulations)

APCA / WCAG 3 #

• Accurate Contrast Using the APCA | Myndex
• APCA Tools & Apps | APCA
• Accessible Palette: Create color systems with consistent lightness and contrast

Local software #

• ThePacielloGroup/CCAe: The Colour Contrast Analyser (CCA) helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators.
• soffes/contrast: Contrast for macOS

HSL #

• HSL Color Picker - by Brandon Mathis - HSL 色盘
• HSL Random Color Generator - 随机 HSL 生成器

孟塞尔 / OSA-UCS / LCH / OKLCH #

• Munsell Color Palette - 非常全面的孟塞尔色盘
• Virtual Munsell Color Wheel) - 更简洁实用的孟塞尔色盘
• LCH Colour picker - RGB ⇄ LCH
• Munsell for Designers - 用一个 Hex 生成颜色系统 Hue friends 非常不准
• Optical Society of America Uniform Color Scales (OSA-UCS) - OSA-UCS 色标全图
• RGB Chart & Multi Tool - Hex → 孟塞尔
• Hex Color Codes, Paint Matching and Color Picker - 各种 ⇄ 孟塞尔
• OKLCH Color Picker & Converter

CIELAB / CIELUV #

• CIELAB and CIECAM02 color picker - 色盘
• Lch and Lab colour and gradient picker — David Johnstone - 色盘 & 渐变生成器
• HSLuv - Human-friendly HSL - CIELUV 色盘
• Colorpicker for data | tristen - 渐变生成器

CSS #

CSS 效果生成器 #

• How to Center in CSS
• Interactive CSS Grid Generator | Layoutit Grid
• Interactive CSS Cheat Sheet - 偏怀旧效果的 CSS
• Neumorphism/Soft UI CSS shadow generator - 新拟物主义按钮
• CSS text-stroke generator (text-shadow hack) - 文字描边
• Box Shadows - Generate CSS Box Shadows - 几个阴影模板
• 91 Beautiful CSS box-shadow examples - CSS Scan - 更多阴影模板
• Make a smooth shadow, friend. - 非常复杂的阴影
• CSS Gradient — Generator, Maker, and Background - 简单渐变
• Pure CSS Stripes Generator - No Flash, No Image, ONLY CSS - 条纹渐变
• CSS Color Gradient Generator: beautiful gradients for free - 非常复杂的圆形渐变
• URL-encoder for SVG - SVG for CSS
• CSS Shadow Palette Generator
• CSS 三角形生成器，纯 CSS 制作三角箭头形状 - dute.org

CSS 设计 #

• Web Design Experiments by Jen Simmons - CSS 的排版可能性
• Email Design Reference - 邮件排版工具
• The CSS Cascade - 一些 CSS 挑战
• KakaCss - 快速生成 Css 样式

图案 / 背景 #

图标 #

• favicon 制作
• Zondicons
• Tabler Icons - 800+ Highly customizable free SVG icons - 纯 SVG 图标
• API for Web Icons | SVGBox.net - 纯 SVG 的图标／国旗／动画
• CSS Icons - 纯 CSS 制作的各种图标，代码
• icono | Pure CSS icons - 另外一个， 代码

形状 #

• SvgPathEditor
• Blobmaker - SVG 泡泡
  • Very similar: Blob generator by Superdesigner
• Fancy Border Radius Generator - CSS 泡泡
• Get Waves – Create SVG waves for your next design - 波浪生成器

背景 / 花纹 #

• SVG
  • Hero Patterns
  • Pattern Monster - SVG Pattern Generator (Repo: catchspider2002/svelte-svg-patterns)
  • Pattern Generator | Create Seamless, Royalty-Free Patterns
  • Free SVG generators, color tools & web design tools
    • SVG Generators — Smashing Magazine
  • SVG pattern backgrounds
  • SVG Fundation Pattern Collection - Coloreous
• CSS gradient
  • CSS3 Patterns Gallery (Repo: LeaVerou/css3patterns)
  • CSS Pattern: Fancy backgrounds with CSS gradients
  • CSS pattern backgrounds by Super designer
  • pattern.css - Background Patterns in CSS (Repo: bansal-io/pattern.css)
  • CSS Polka Dot Generator
• You Crazy? Patterns with CSS Gradients — CSS Gradient

人像 / 头像 #

• Open Peeps, Hand-Drawn Illustration Library - 小人头像／半身／全身像生成器
• Stubborn - Free Illustrations Generator - 有脸小人生成器
• Humaaans: Mix-&-Match illustration library - 无脸小人生成器
• Illustrations | unDraw - 各种小人插画
• boringdesigners/boring-avatars - 非常美丽的随机头像

其他设计相关 #

• Hall of Fame — Pages - 设计实例，按页面类型分类
• Land-book - the finest hand-picked website inspirations - 设计实例，按网站类型分类
• SVG-Optimiser
• Featured Figma Plugins - tovi.fun - Figma 插件推荐（中文）
• Meta Tags — Preview, Edit and Generate - SEO 预览
• PageSpeed Insights - 网站测速
• Grids - 网格设计实例介绍，最底下有阅读推荐

一些我喜欢的配色 #

莫兰迪色／大地色／Morandi palette #

#faf9f7 #d3b67c #81bece #333333