Colours

The Kaharagia colour palette consists of the official national colours: Kaharagian Red and Gold, supplemented with a neutral grey scale and semantic colours.

Primary Colours (Kaharagian Red)

Kaharagian Red (#AD0908) is the primary brand colour. It represents authority and the official nature of government services. Use it for headers, primary buttons, links, and key interactive elements.

#5C0504

900

#7A0706

800

#AD0908

Primary

#C41615

500

#D93534

400

#E66362

300

#F2A5A4

200

#FCEAEA

100

Secondary Colours (Kaharagian Gold)

Kaharagian Gold (#FEBC0A) is used sparingly as an accent colour. Its primary use is for focus states, using yellow backgrounds with black outlines for keyboard navigation visibility.

#7A5A05

900

#9A7206

800

#FEBC0A

Gold

#FFD04A

400

#FFE07A

300

#FFEDAB

200

#FFF8E0

100

Semantic Colours

Use semantic colours to communicate status and feedback to users. Note that Warning uses the same hex value as Gold - use --color-warning for alerts and status messages, and --color-gold for decorative or brand purposes.

#00703C

Success

#FEBC0A

Warning

#D4351C

Error

#1D70B8

Info

Neutral Colours

The neutral palette provides greys for text, borders, and backgrounds. The darkest grey (#0B0C0C) is used for body text for maximum readability.

#0B0C0C

950

#1D1D1B

900

#2E2E2C

800

#505A5F

700

#626A6E

600

#8B9196

500

#B1B4B6

400

#D1D3D4

300

#E6E7E8

200

#F3F4F5

100

#F8F9FA

Semantic Light Variants

Light variants of semantic colours for use as backgrounds in alerts, notifications, and status indicators.

#E6F4ED

Success Light

#FFF8E0

Warning Light

#FCEAEA

Error Light

#E8F1F8

Info Light

Extended Palette

Additional colours for data visualization, charts, illustrations, and extended UI needs. These supplement the core brand palette when more variety is needed.

Blue

Use for informational content, links, and data visualization.

#0B1E33

950

#0D2B4A

900

#0F3D66

800

#115087

700

#1D70B8

600

#2B8CC4

500

#5BC0EB

400

#9DD9F3

300

#C5E8F7

200

#E8F1F8

100

Green

Use for success states, positive indicators, and environmental themes.

#002E18

950

#00401F

900

#005A2B

800

#00703C

700

#00894A

600

#28A745

500

#5CB85C

400

#8ED08E

300

#B8E4B8

200

#E6F4ED

100

Purple

Use for visited links, creative content, and data visualization variety.

#1E0A2E

950

#2E1043

900

#4A1A6B

800

#4C2C92

700

#6A3DB2

600

#8855CC

500

#A77BDE

400

#C4A3EA

300

#DBC9F4

200

#F2EBFA

100

Teal

Use for healthcare, environment, and data visualization.

#062B2B

950

#0A3D3D

900

#0E5555

800

#10707A

700

#138D8D

600

#20B2AA

500

#40C9C9

400

#7DDEDE

300

#B3EDED

200

#E0F7F7

100

Orange

Use for highlights, calls-to-action, and data visualization. Use sparingly as it can conflict with warning states.

#3D1E00

950

#5C2D00

900

#7A3C00

800

#A35200

700

#CC6600

600

#F58220

500

#FF9F43

400

#FFB86C

300

#FFD4A3

200

#FFF0E0

100

Pink

Use for data visualization and creative applications.

#3D0A1E

950

#5C0F2D

900

#8B1545

800

#B31B5D

700

#D63384

600

#E855A0

500

#F178B6

400

#F7A6CD

300

#FBCFE8

200

#FDF2F8

100

Brown

Use for earth tones, heritage content, and natural themes.

#1C1410

950

#2E211A

900

#4A352A

800

#6B4A3A

700

#8B5E48

600

#A67458

500

#C49078

400

#D9B199

300

#EBD0BE

200

#F7EDE6

100

Cream / Parchment

Warm off-white tones for traditional, official document aesthetics. Used on the Royal Gazette.

#4A4538

950

#6B6455

900

#8C8472

800

#A9A08C

700

#C4BAA5

600

#D9D0BC

500

#E8E2D3

400

#F0ECE0

300

#F5F3EA

200

#FAF9F5

100

Warm Gray

Grays with warm undertones for softer, less clinical interfaces.

#1C1917

950

#292524

900

#44403C

800

#57534E

700

#78716C

600

#A8A29E

500

#D6D3D1

400

#E7E5E4

300

#F5F5F4

200

#FAFAF9

100

Ivory / Antique

Yellowed paper tones for heritage, archival, and historical content.

#3D3929

950

#5C553D

900

#7A7252

800

#998F68

700

#B5AA82

600

#CCC49E

500

#E0DABB

400

#EDE9D5

300

#F5F3E7

200

#FDFCF7

100

Stone

Cool, muted tones inspired by limestone and marble for institutional settings.

#1A1D1E

950

#2A2E30

900

#3D4245

800

#545B5F

700

#6E777C

600

#8B9398

500

#B0B7BB

400

#CDD2D5

300

#E5E8EA

200

#F4F5F6

100

Background Presets

Ready-to-use background colours for common use cases.

#FFFFFF

White

#F8F9FA

Page Default

#F5F6F1

Gazette Cream

#FAF9F5

Warm White

#F5F3EA

Parchment

#FDFCF7

Ivory

#F4F5F6

Stone

#F3F4F5

Cool Gray

Data Visualization Palette

A curated set of colours optimized for charts, graphs, and data visualizations. These colours are designed to be distinguishable from each other and accessible.

#AD0908

Series 1

#1D70B8

Series 2

#00703C

Series 3

#F58220

Series 4

#4C2C92

Series 5

#10707A

Series 6

#D63384

Series 7

#6B4A3A

Series 8

Sequential Palette (Single Hue)

For data that progresses from low to high values.

Diverging Palette

For data with a meaningful midpoint (e.g., positive/negative, above/below average).

Usage Guidelines

Do

Use Kaharagian Red for primary interactive elements
Use Gold only for focus states and sparingly for accents
Use the darkest grey (#0B0C0C) for body text
Ensure sufficient colour contrast for accessibility (4.5:1 for normal text)

Don't

Don't use Gold as a background colour for large areas
Don't use light colours on light backgrounds
Don't rely on colour alone to convey meaning

CSS Variables

:root {
  /* Primary Brand - Kaharagian Red */
  --color-primary-900: #5C0504;
  --color-primary-800: #7A0706;
  --color-primary: #AD0908;
  --color-primary-500: #C41615;
  --color-primary-400: #D93534;
  --color-primary-300: #E66362;
  --color-primary-200: #F2A5A4;
  --color-primary-100: #FCEAEA;

  /* Secondary - Kaharagian Gold */
  --color-gold-900: #7A5A05;
  --color-gold-800: #9A7206;
  --color-gold: #FEBC0A;
  --color-gold-400: #FFD04A;
  --color-gold-300: #FFE07A;
  --color-gold-200: #FFEDAB;
  --color-gold-100: #FFF8E0;

  /* Neutral - Grays */
  --color-gray-950: #0B0C0C;
  --color-gray-900: #1D1D1B;
  --color-gray-800: #2E2E2C;
  --color-gray-700: #505A5F;
  --color-gray-600: #626A6E;
  --color-gray-500: #8B9196;
  --color-gray-400: #B1B4B6;
  --color-gray-300: #D1D3D4;
  --color-gray-200: #E6E7E8;
  --color-gray-100: #F3F4F5;
  --color-gray-50: #F8F9FA;

  /* Semantic */
  --color-success: #00703C;
  --color-warning: #FEBC0A;  /* Same as gold */
  --color-error: #D4351C;
  --color-info: #1D70B8;
}