---
description: 'Highly recommended: 🔥'
icon: sparkles
---

# Tools and Resources

## Fluid Typography

Fluid Type Sacle: [https://www.fluid-type-scale.com](https://www.fluid-type-scale.com/) 🔥

Fluid Sup / Sub CSS Generator: [https://codepen.io/realanthonyc/pen/emOXEMz](https://codepen.io/realanthonyc/pen/emOXEMz) 🔥

Finsweet's Fluid Responsive: [https://finsweet.com/client-first/docs/fluid-responsive](https://finsweet.com/client-first/docs/fluid-responsive#fluid-responsive-generator)



## Color Tools

### Tints / Palette Generators

[https://www.tints.dev](https://www.tints.dev/?neutral=7E7E7E\&primary=0145AB\&secondary=00B499\&accent=F3BB09) 🔥

[https://hihayk.github.io](https://hihayk.github.io/scale/#5/5/70/90/0/0/100/100/0145ab/1/69/171/white)

[https://www.tailwindshades.com](https://www.tailwindshades.com/)

[https://uicolors.app/create](https://uicolors.app/create)

[https://coolors.co/generate](https://coolors.co/generate)

[https://www.canva.com/colors](https://www.canva.com/colors/)

### Gradient Generators  

[https://cssgradient.io](https://cssgradient.io)

<details>

<summary>More color tools</summary>

[https://coolors.co/contrast-checker](https://coolors.co/contrast-checker)

[https://huemint.com](https://huemint.com/)

[https://www.color-hex.com](https://www.color-hex.com/)

[https://poolors.com](https://poolors.com/)

</details>

<details>

<summary>Learn more about colors</summary>

Knowing how others deal with color systems, palettes, naming, etc.

Tailwind Colors\
[https://tailwindcss.com/docs/customizing-colors](https://tailwindcss.com/docs/customizing-colors)

Google Dynamic Color in Material Design 3\
[https://m3.material.io/styles/color](https://m3.material.io/styles/color/system/overview)

Google Material 2 Color System\
[https://m2.material.io/design/color/the-color-system](https://m2.material.io/design/color/the-color-system.html)

Shopify Polaris - Palettes and Roles\
[https://polaris.shopify.com/design/colors/palettes-and-roles](https://polaris.shopify.com/design/colors/palettes-and-roles)

Shopify Polaris - Color Tokens\
[https://polaris.shopify.com/tokens/color](https://polaris.shopify.com/tokens/color)

</details>



## Table Generator

Finsweek Table (a Webflow app): [https://webflow.com/apps/detail/finsweet-table](https://webflow.com/apps/detail/finsweet-table)

HTML Table Generator: [https://www.tablesgenerator.com/html\_tables](https://www.tablesgenerator.com/html_tables)



## Fonts

PX to REM Converter: [https://remtopx.com](https://remtopx.com/)

Fontjoy Font Pairing: [https://fontjoy.com](https://fontjoy.com/)



## Others

CSS Grid generator: [https://cssgridgenerator.io](https://cssgridgenerator.io/)

UTM builder: [https://utmbuilder.net](https://utmbuilder.net/)

Squoosh: [https://squoosh.app](https://squoosh.app)

Phosphor Icons: [https://phosphoricons.com](https://phosphoricons.com/) 🔥

Boxicons: [https://boxicons.com](https://boxicons.com/) 🔥

Lucide Icons: [https://lucide.dev](https://lucide.dev/)

Heroicons: [https://heroicons.com](https://heroicons.com/)

Emoji Finder: [https://emojifinder.com](https://emojifinder.com/)

UTM Builder: [https://utmbuilder.com](https://utmbuilder.com/)