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.

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.