40 websites every designer should bookmark
Design resources and tools worth bookmarking: palettes, type pairings, icons, illustrations, backgrounds and editors that run in a browser.
Most are free, and every entry shows its price.
Updated · 40 sites · hand-checked
-
1. Coolors
Generate colour palettes by hitting spacebar until something clicks, then lock, tweak and export.
- Design & Type
- Freemium
- coolors.co
-
2. Realtime Colors
Try a colour scheme and fonts on a full sample website instead of isolated swatches. Randomise, lock, check contrast and export when it looks right.
- Design & Type
- Free
- realtimecolors.com
-
3. Fontjoy
Press generate and get a heading, subheading and body font that work together. Lock the one you love and let it find partners for it.
- Design & Type
- Free
- fontjoy.com
-
4. Haikei
Generate layered waves, blobs, blurred gradients and low-poly backgrounds as SVG. Every shape has sliders and a randomise button.
- Design & Type
- Free
- haikei.app
-
5. fffuel
Dozens of small SVG generators for gradients, noise, squiggles, blobs and textures, each one playful enough to lose half an hour in.
- Design & Type
- Free
- fffuel.co
-
6. Photopea
A full Photoshop-class image editor in a browser tab. Opens PSD, XCF, Sketch and RAW files.
- Design & Type
- Freemium
- photopea.com
-
7. Spline
Model, animate and add interactions to 3D scenes in the browser, then embed them on a website like an image.
- Design & Type
- Freemium
- spline.design
-
8. Unsplash
High resolution photography under a permissive licence, with a search that mostly understands moods.
- Design & Type
- Free
- unsplash.com
-
9. unDraw
A big library of flat illustrations for any idea. Set your brand colour before downloading and every one of them matches it. No attribution required.
- Design & Type
- Free
- undraw.co
-
10. SVG Repo
Half a million free SVG icons and vectors, searchable, editable in the browser and downloadable without an account.
- Design & Type
- Free
- svgrepo.com
-
11. Icônes
Search more than a hundred open-source icon sets at once and copy any icon as SVG or a framework component. Fast, keyboard-friendly, no install.
- Design & Type
- Open source
- icones.js.org
-
12. Khroma
Pick fifty colours you like and a small neural net in your browser learns your taste, then generates endless palettes to match.
- Design & Type
- Free
- khroma.co
-
13. Huemint
Generates palettes previewed on a website, a logo or a gradient, so you judge colours where they will be used. Lock the ones you like and reroll the rest.
- Design & Type
- Free
- huemint.com
-
14. Hero Patterns
A collection of subtle repeating SVG background patterns. Choose colours and opacity, then copy a single line of CSS.
- Design & Type
- Free
- heropatterns.com
-
15. Type Scale
Pick a ratio and preview a whole typographic scale in your own font, then copy the CSS straight out.
- Design & Type
- Free
- typescale.com
-
16. Fonts In Use
An indexed archive of typography in the wild, searchable by typeface, format and industry.
- Design & Type
- Free
- fontsinuse.com
-
17. WebAIM Contrast Checker
Paste two colours, get the WCAG contrast ratio and a pass or fail. The definitive quick answer.
- Design & Type
- Free
- webaim.org
-
18. Squoosh
Compress images with a side-by-side slider so you can see exactly what quality you are trading away.
- Design & Type
- Open source
- squoosh.app
-
19. LottieFiles
A huge library of small vector animations, free to use, with an editor to recolour them and export for web or apps.
- Design & Type
- Freemium
- lottiefiles.com
-
20. Open Peeps
A hand-drawn library of people you assemble from heads, bodies, faces and poses. Released into the public domain, so use them anywhere.
- Design & Type
- Free
- openpeeps.com
-
21. Crafting Apps
Free, open-source stand-ins for Photoshop, Illustrator, Premiere, Lightroom, Acrobat, After Effects, InDesign, Word, PowerPoint, Excel, AutoCAD and Pro Tools, built natively in Rust.
- Design & Type
- Open source
- getartcraft.com
-
22. 3DLogoLab
Drop in a flat logo or SVG and get a spinning 3D version with chrome, glass or gold materials, ready to export as a video.
- Design & Type
- Freemium
- 3dlogolab.io
-
23. Angle Ref
Find portrait photo references by dragging a 3D head to the exact angle you need to draw.
- Design & Type
- Free
- angleref.com
-
24. Artkit Baby Track
Upload a video or open your camera and get the trendy blob-tracking look: boxes and lines that follow moving objects.
- Design & Type
- Free
- artkit.cc
-
25. Book of Shapes
A gallery of algorithmic patterns you can tweak with sliders and download as SVG or PNG.
- Design & Type
- Free
- bookofshapes.com
-
26. Dimensions
Dimensioned drawings of everyday things, from furniture and cars to sports fields and animals, with downloadable CAD files.
- Design & Type
- Freemium
- dimensions.com
-
27. Doodle Fonts
Draw each letter by hand and download the result as a working font file.
- Design & Type
- Free
- doodlefonts.app
-
28. Effect.app
Run photos and videos through glitch, halftone, blur and distortion effects in the browser and stack them until it looks right.
- Design & Type
- Freemium
- effect.app
-
29. Flourish
Paste in a spreadsheet and get an animated, interactive chart or map, including the famous racing bar charts.
- Design & Type
- Freemium
- flourish.studio
-
30. GridType
Build letters on a grid of cells and export the result as a font, for geometric pixel and modular type.
- Design & Type
- Free
- grid-type.com
-
31. Image to ASCII
Turn any image into ASCII art with sliders for character count, contrast and edge detection, then copy it as text.
- Design & Type
- Free
- asciiart.eu
-
32. Juddesk
Plan a desk setup in 3D with real monitors, keyboards and lamps at true scale, then rearrange it until it feels right.
- Design & Type
- Free
- juddesk.com
-
33. Lordicon
Animated icons that move on hover or click, with a large free set and an editor to change colours and stroke.
- Design & Type
- Freemium
- lordicon.com
-
34. Palette Maker
Build colour palettes and preview them instantly on logos, UI screens, illustrations and patterns.
- Design & Type
- Free
- palettemaker.com
-
35. Photo Gradient
Upload a photo and pull smooth mesh gradients out of its colours, or build one from scratch and export it.
- Design & Type
- Free
- photogradient.com
-
36. Pigment
Generates colour pairs by mixing pigment and lighting rather than maths, which gives softer, more painterly combinations.
- Design & Type
- Free
- pigment.shapefactory.co
-
37. Shader Gradient
Design moving 3D gradient backgrounds by tweaking noise, shape and camera, then export them or drop them into Figma, Framer or React.
- Design & Type
- Open source
- shadergradient.co
-
38. Snazzy Maps
Hundreds of ready-made colour styles for Google Maps, from blueprint to noir, with the JSON to drop into your own map.
- Design & Type
- Free
- snazzymaps.com
-
39. SpacePlanner
Draw floor plans and furniture layouts right in the browser, no sign-up, and see the room in 3D when you're done.
- Design & Type
- Free
- spaceplanner.co
-
40. StoryTribe
Make storyboards by dragging in ready-drawn characters, poses and backgrounds, then share the board with a link.
- Design & Type
- Free
- storytribeapp.com
Want more than 40?
This list is one slice of a directory of 478 websites. Search, filter by category or tag, or shuffle the lot.
Explore the full directoryQuestions
What is the best free colour palette generator?
Coolors is the classic. Realtime Colors shows a palette on a real layout, and Khroma and Huemint use AI to suggest combinations.
More lists like this
- Websites to cure boredom 40
- Powerful websites you should know 50
- Useful websites you should know 40
- Websites that feel illegal to know 40
- Cool websites you didn't know existed 37
- Mind-blowing interactive websites 40
- Free websites that should cost money 40
- AI websites worth using 16
- Websites for students 40
- Websites for developers 40
- Free browser games 40
- Websites for music lovers 40
- Websites for artists 40
- Nostalgic retro websites 29
- Websites to explore the world 40
- Relaxing websites 19