Colors

Default colors for themes.

You can use any color anywhere, all colors change with the theme. If you want to customize your colors, please read Themes to learn more.

import { useTheme } from '@brudi/hui'

const myComponent = () => {
  const { palette } = useTheme()

  return <p style={{ color: palette.system.info[10] }}>myComponent</p>
}
Get palette from useTheme.

Global

base

Black

#000000

White

#ffffff

grayscale

Grayscale 1

#FBFCFD

Grayscale 2

#F8F9FA

Grayscale 4

#F1F3F5

Grayscale 4

#ECEEF0

Grayscale 5

#E6E8EB

Grayscale 6

#DFE3E6

Grayscale 7

#D7DBDF

Grayscale 8

#C1C8CD

Grayscale 9

#889096

Grayscale 10

#7E868C

Grayscale 11

#687076

Grayscale 12

#11181C

Brand

primary

Primary 1

#FCFBFF

Primary 2

#F8F4FE

Primary 3

#F4EEFF

Primary 4

#EBDEFE

Primary 5

#E3D3FE

Primary 6

#D9C1FE

Primary 7

#C8A6FD

Primary 9

#B385FC

Primary 10

#8435FF

Primary 11

#7521F9

Primary 12

#5811C9

Primary 13

#1C005A

System

Use different colors to express more emotional changes.

error

Error 1

#FFFCFC

Error 2

#FFF8F7

Error 3

#FFF0EE

Error 4

#FFE6E2

Error 5

#FDD8D3

Error 6

#FAC7BE

Error 7

#F3B0A2

Error 8

#EA9280

Error 9

#E54D2E

Error 10

#DB4324

Error 11

#CA3214

Error 12

#341711

info

Info 1

#FDFDFE

Info 2

#F8FAFF

Info 3

#F0F4FF

Info 4

#E6EDFE

Info 5

#D9E2FC

Info 6

#C6D4F9

Info 7

#AEC0F5

Info 8

#8DA4EF

Info 9

#3E63DD

Info 10

#3A5CCC

Info 11

#3451B2

Info 12

#101D46

success

Success 1

#FBFEFC

Success 2

#F2FCF5

Success 3

#E9F9EE

Success 4

#DDF3E4

Success 5

#CCEBD7

Success 6

#B4DFC4

Success 7

#92CEAC

Success 8

#5BB98C

Success 9

#30A46C

Success 10

#299764

Success 11

#18794E

Success 12

#153226

warn

Warning 1

#FEFDFB

Warning 2

#FFF9ED

Warning 3

#FFF4D5

Warning 4

#FFECBC

Warning 5

#FFE3A2

Warning 6

#FFD386

Warning 7

#F3BA63

Warning 8

#EE9D2B

Warning 9

#FFB224

Warning 10

#FFA01C

Warning 11

#AD5700

Error 12

#4E2009