Customizing Colors - Horizon UI

Customize the default color palette for Horizon UI and add your own custom colors that matches your brand.

Default Color Palette

Horizon UI TailwindCSS provides a default color palette that you can use.

brand

#E9E3FF

100

#C0B8FE

200

#A195FD

300

#8171FC

400

#7551FF

500

#422AFB

600

#3311DB

700

#2111A5

800

#190793

900

#11047A

gray

#F5F6FA

100

#EEF0F6

200

#DADEEC

300

#C9D0E3

400

#B0BBD5

500

#B5BED9

600

#A3AED0

700

#707eae

800

#2D396B

900

#1B2559

navy

#d0dcfb

100

#aac0fe

200

#a3b9f8

300

#728fea

400

#3652ba

500

#1b3bbb

600

#24388a

700

#1B254B

800

#111c44

900

#0b1437

orange

#fff7ed

100

#ffedd5

200

#fed7aa

300

#fdba74

400

#fb923c

500

#f97316

600

#ea580c

700

#c2410c

800

#9a3412

900

#7c2d12

amber

#fffbeb

100

#fef3c7

200

#fde68a

300

#fcd34d

400

#fbbf24

500

#f59e0b

600

#d97706

700

#b45309

800

#92400e

900

#78350f

yellow

#fefce8

100

#fef9c3

200

#fef08a

300

#fde047

400

#fbcf33

500

#eab308

600

#ca8a04

700

#a16207

800

#854d0e

900

#713f12

lime

#f7fee7

100

#ecfccb

200

#d9f99d

300

#bef264

400

#98ec2d

500

#82d616

600

#65a30d

700

#4d7c0f

800

#3f6212

900

#365314

light-green

#f1f8e9

100

#dcedc8

200

#c5e1a5

300

#aed581

400

#9ccc65

500

#8bc34a

600

#7cb342

700

#689f38

800

#558b2f

900

#33691e

green

#05cd991a

100

#dcfce7

200

#bbf7d0

300

#86efac

400

#4ade80

500

#22c55e

600

#17ad37

700

#15803d

800

#166534

900

#14532d

teal

#f0fdfa

100

#ccfbf1

200

#99f6e4

300

#5eead4

400

#2dd4bf

500

#14b8a6

600

#0d9488

700

#0f766e

800

#115e59

900

#134e4a

cyan

#ecfeff

100

#cffafe

200

#a5f3fc

300

#67e8f9

400

#21d4fd

500

#17c1e8

600

#0891b2

700

#0e7490

800

#155e75

900

#164e63

light-blue

#eff6ff

100

#dbeafe

200

#bfdbfe

300

#93c5fd

400

#60a5fa

500

#3b82f6

600

#2152ff

700

#1d4ed8

800

#344e86

900

#00007d

blue

#e3f2fd

100

#bbdefb

200

#90caf9

300

#64b5f6

400

#42a5f5

500

#2196f3

600

#1e88e5

700

#1976d2

800

#1565c0

900

#0d47a1

indigo

#eef2ff

100

#e0e7ff

200

#c7d2fe

300

#a5b4fc

400

#818cf8

500

#6366f1

600

#4f46e5

700

#4338ca

800

#3730a3

900

#312e81

purple

#faf5ff

100

#f3e8ff

200

#e9d5ff

300

#d8b4fe

400

#c084fc

500

#a855f7

600

#9333ea

700

#7928ca

800

#6b21a8

900

#581c87

pink

#fdf2f8

100

#fce7f3

200

#fbcfe8

300

#f9a8d4

400

#f472b6

500

#ff0080

600

#db2777

700

#be185d

800

#9d174d

900

#831843

red

#ee5d501a

100

#fee2e2

200

#fecaca

300

#fca5a5

400

#f87171

500

#f53939

600

#ea0606

700

#b91c1c

800

#991b1b

900

#7f1d1d

lightPrimary

Default

#F4F7FE

darkPrimary

Default

#B0BBD5

greenPrimary

Default

#01B574

bluePrimary

Default

#2B3674

blueSecondary

Default

#4318FF

brandLinear

Default

#868CFF

shadow

500

rgba(112, 144, 176, 0.08)

Customizing The Default Color Palette

Customizing colors for @material-tailwind/html is very easy and straightforward, it's the same as tailwindcss colors customization.

You just need to modify the colors object for the tailwind.config.js file.

module.exports = withHT({
  theme: {
    colors: {
      // Configure your color palette here
    },
  },
});

For more information about tailwindcss colors customization, please check the TailwindCSS Documentation

theming

fonts