Color Documentation

Complete overview of all colors used in the BizKitHub platform. Click on any color to copy its HEX code to clipboard.

🎨 Platform Primary Color

The main identifying color of the entire BizKitHub platform is orange #ec6c50. This color is used for all key user interface elements, buttons, links and highlights. For complete brand guidelines and logo usage, visit our Logo Documentation page.

Main Project Colors

Basic color palette used across the entire platform

#ec6c50

Primary

Primary orange color of the platform

#fbeeeb

Secondary

Secondary light color

#1d2125

Font

Main text color

#1d2125

Header Background

Header background color

#fcfcfd

Gray Light

Very light gray

#f9fafb

Gray

Light gray

Light Theme - Primary Colors

Primary color scale for light mode

#E6F0FF

primary50

#CCE0FF

primary100

#99C2FF

primary200

#66A3FF

primary300

#3385FF

primary400

#0066FF

primary500

Brand primary

#0059E6

primary600

#004DBF

primary700

#003F99

primary800

Light Theme - Text Colors

Text colors for light mode

#0D1117

textPrimary

#333842

textSecondary

#595F6B

textTertiary

#fff

textInverse

Light Theme - Neutral Gray

Neutral gray palette for light mode

#1A1A1A

neutralGray900

#2B2B2B

neutralGray800

#3C3C3C

neutralGray700

#4D4D4D

neutralGray600

#5E5E5E

neutralGray500

#6F6F6F

neutralGray400

#808080

neutralGray300

#A0A0A0

neutralGray200

#C0C0C0

neutralGray100

#E0E0E0

neutralGray50

#f3f4f6

neutralGray25

Light Theme - Content Colors

Content colors for different hierarchy levels

#0A0E12

content01

#1C2A3E

content02

#2B3A4E

content03

#3A4B60

content04

#4A5D72

content05

#5A6F84

content06

#6B8196

content07

#7B94A8

content08

#8CA6BA

content09

#9DB8CC

content10

#AFCADB

content11

Status Colors

Colors for states - errors, success, warnings

#D32F2F

errorPrimary

#B71C1C

errorHover

#FFCDD2

errorDisabled

#388E3C

successPrimary

#2E7D32

successHover

#C8E6C9

successDisabled

Dark Theme Colors

Color palette for dark mode

#1A75FF

brandPrimary

#fff

textPrimary

#888888

textSecondary

#000

textInverse

#0D3B80

primary50

#1548B3

primary100

#1C5ACF

primary200

#1F66E6

primary300

#1A6FFF

primary400

#1A75FF

primary500

Brand primary

#1A5DC4

primary600

#13479B

primary700

#0D3273

primary800

#ff0000

errorPrimary

Legacy Colors

Older color definitions - gradually being replaced by new ones

#fbf9f7

appLightBackground

#242424

appLightFont

#20201e

appDarkBackground

#2e2d2b

appDarkSecondaryBackground

#434241

appDarkActiveBackground

#4c4c49

appDarkHoverBackground

#383735

appDarkSeparator

#c0c0bf

appDarkText

#e5e5e4

appDarkTextHover

#1e1e1e

appDarkSystemContentBackground

#20201e

appDarkSystemHeader

#6a6a68

appDarkSystemHeaderBorder

#000

black

#0d1117

blackBackground

#1d2125

blackDark

#fff

white

#f3f2ee

whiteLightBackground

#f8fafb

grayLight

#eaeaea

grayUltraLight

#161b22

grayDark

#f9edbe

warningBackground

#f0c36d

warningBorder

#4f52b2

pastelButtonBlue

#0178d4

pastelBlue

#c7e2f6

pastelBlueLight

#dc3545

red

#e95736

orange

#fd3131

prideRed

#FF9800

prideOrange

#FFEB3B

prideYellow

#4CAF50

prideGreen

#3F51B5

prideBlue

#9C27B0

pridePurple

Accessibility & Usage Guidelines

🌟 Design Philosophy

We prioritize user accessibility and prefer light theme designs across all BizKitHub applications. All headers and footers consistently use dark bars (#1d2125) to maintain visual hierarchy and brand consistency.

♿ Accessibility Standards

WCAG 2.1 Compliance

• AA Level: Minimum contrast ratio of 4.5:1 for normal text
• AAA Level: Preferred contrast ratio of 7:1 for enhanced readability
• Large Text: Minimum contrast ratio of 3:1 for text 18pt+ or 14pt+ bold
• Non-text Elements: Minimum contrast ratio of 3:1 for UI components

✅ Best Practices

• Use primary orange (#ec6c50) for main actions and CTAs
• Maintain proper text-to-background contrast ratios
• Use consistent color palette across all interfaces
• Test colors in different lighting conditions
• Always use dark headers/footers (#1d2125) for consistency
• Prefer light theme as the default user experience

⚠️ What to Avoid

• Don't use too many colors simultaneously
• Avoid low contrast combinations
• Don't change primary color without consultation
• Don't use legacy colors in new projects
• Avoid pure black (#000) and pure white (#fff) for text
• Don't rely solely on color to convey information

🎯 Implementation Guidelines

When implementing colors in projects, always consider users with visual impairments. Use semantic color names in your CSS/design tokens, test with accessibility tools, and provide alternative ways to distinguish information beyond color alone.