SGA Dental Partners -- Color Palette Specimen

01

Brand Colors

The core palette for SGA Dental Partners. Primary Blue is the dominant brand identifier, supported by functional accents for CTAs, data visualization, and interactive states.

SGA Blue

HEX #2D6FB7

RGB 45, 111, 183

HSL 211, 61%, 45%

Primary brand color. Headers, links, key UI elements.

Accent Lime

HEX #C4D347

RGB 196, 211, 71

HSL 66, 64%, 55%

Form accents, dividers, success indicators, data viz.

Accent Cyan

HEX #009DD6

RGB 0, 157, 214

HSL 196, 100%, 42%

Secondary links, info states, supporting accent.

Accent Green

HEX #61CE70

RGB 97, 206, 112

HSL 128, 54%, 59%

Success states, positive metrics, confirmations.

CTA Orange

HEX #F36F21

RGB 243, 111, 33

HSL 22, 90%, 54%

Submit buttons, primary CTAs, attention-drawing elements.

Hover Red

HEX #DE4625

RGB 222, 70, 37

HSL 11, 74%, 51%

Hover states, destructive actions, error indicators.

02

Tints & Shades

Each brand color expanded into a 19-step scale from 90% tint (near white) to 90% shade (near black). Click any swatch to copy its hex value. The base color is marked with a ring.

03

Neutrals & Text

Text hierarchy and UI surface colors drawn directly from the SGA website. These provide the foundation for readable, accessible interfaces.

Text Primary

#333333

rgb(51, 51, 51)

Body text, headings

Text Secondary

#4F4F4F

rgb(79, 79, 79)

Subheadings, descriptions

Text Tertiary

#7A7A7A

rgb(122, 122, 122)

Captions, placeholders, meta

Border

#CCCCCC

rgb(204, 204, 204)

Dividers, input borders, card outlines

Background

#FFFFFF

rgb(255, 255, 255)

Primary surface

Background Alt

#FAFAFA

rgb(250, 250, 250)

Secondary surface, alternating rows

Black

#000000

rgb(0, 0, 0)

Maximum contrast (use sparingly)

White

#FFFFFF

rgb(255, 255, 255)

Text on dark, button text

04

WCAG Contrast Matrix

Contrast ratios between every brand color and common text/background values. Green cells pass WCAG AA for normal text (4.5:1+), yellow passes for large text only (3:1+), red fails both.

AA Pass (4.5:1+) Large Text Only (3:1+) Fail (<3:1)

05

Suggested Pairings

Recommended color combinations for common UI contexts. Each pairing has been checked for contrast compliance and visual harmony.

Page Headers

8.6:1 contrast

Welcome to SGA Dental Partners

SGA Blue headings on white with lime accent underlines. Classic brand expression.

Primary CTA Button

3.1:1 contrast

Schedule a Consultation

Orange button with white text. Red hover state. High visibility for conversions.

Info Cards

10.4:1 contrast

Our network includes 50+ dental practices across the region.

Light blue tint background, dark text, blue accent. Informational callouts.

Success Messages

8.9:1 contrast

Your appointment has been confirmed.

Green tint background, dark green text. Confirmations and positive feedback.

Navigation Bar

12.6:1 contrast

Home | Services | About | Contact

White nav, dark text, blue active/hover states. Red for destructive hover per brand.

Dark Section

13.2:1 contrast

Transforming dental care across the nation.

Deep blue-800 background, white text, lime accents. Footer or testimonial sections.

06

Dark Mode Mapping

Suggested color transformations for dark interfaces. Brand hues shift lighter and slightly desaturated; surfaces use blue-gray to maintain brand warmth.

Light Mode

Background

#FFFFFF

Surface

#FAFAFA

Border

#CCCCCC

Text Primary

#333333

Text Secondary

#4F4F4F

Text Tertiary

#7A7A7A

SGA Blue

#2D6FB7

Accent Lime

#C4D347

CTA Orange

#F36F21

Dark Mode

Background

#0F172A

Surface

#1E293B

Border

#334155

Text Primary

#F1F5F9

Text Secondary

#CBD5E1

Text Tertiary

#94A3B8

SGA Blue

#5F97D3

Accent Lime

#D4E06A

CTA Orange

#F5934F

07

CSS Custom Properties

Copy-paste ready CSS variables for any project. Includes both light and dark mode tokens.

:root {
  /* Brand Colors */
  --sga-blue: #2D6FB7;
  --sga-lime: #C4D347;
  --sga-cyan: #009DD6;
  --sga-green: #61CE70;
  --sga-orange: #F36F21;
  --sga-red: #DE4625;

  /* Text */
  --text-primary: #333333;
  --text-secondary: #4F4F4F;
  --text-tertiary: #7A7A7A;

  /* Surfaces */
  --bg-primary: #FFFFFF;
  --bg-secondary: #FAFAFA;
  --border: #CCCCCC;

  /* Blue Scale */
  --sga-blue-50: #EBF2FA;
  --sga-blue-100: #D7E5F4;
  --sga-blue-200: #AFCBE9;
  --sga-blue-300: #87B1DE;
  --sga-blue-400: #5F97D3;
  --sga-blue-500: #2D6FB7;
  --sga-blue-600: #245993;
  --sga-blue-700: #1B436E;
  --sga-blue-800: #122D4A;
  --sga-blue-900: #091725;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --sga-blue: #5F97D3;
    --sga-lime: #D4E06A;
    --sga-cyan: #33B5E5;
    --sga-green: #7FDB8A;
    --sga-orange: #F5934F;
    --sga-red: #E76D54;

    --text-primary: #F1F5F9;
    --text-secondary: #CBD5E1;
    --text-tertiary: #94A3B8;

    --bg-primary: #0F172A;
    --bg-secondary: #1E293B;
    --border: #334155;
  }
}

/* Manual toggle alternative */
[data-theme="dark"] {
  --sga-blue: #5F97D3;
  --sga-lime: #D4E06A;
  --sga-cyan: #33B5E5;
  --sga-green: #7FDB8A;
  --sga-orange: #F5934F;
  --sga-red: #E76D54;

  --text-primary: #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-tertiary: #94A3B8;

  --bg-primary: #0F172A;
  --bg-secondary: #1E293B;
  --border: #334155;
}

08

Tailwind Config

Drop this into your tailwind.config.js theme.extend.colors to use brand colors with Tailwind utility classes.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        sga: {
          blue: {
            50:  '#EBF2FA',
            100: '#D7E5F4',
            200: '#AFCBE9',
            300: '#87B1DE',
            400: '#5F97D3',
            500: '#2D6FB7',
            600: '#245993',
            700: '#1B436E',
            800: '#122D4A',
            900: '#091725',
            DEFAULT: '#2D6FB7',
          },
          lime: {
            50:  '#FAFCE8',
            100: '#F4F8D0',
            200: '#E4EE9B',
            300: '#D4E46C',
            400: '#C4D347',
            500: '#A8B83A',
            600: '#8C9B2E',
            700: '#6F7E22',
            800: '#536016',
            900: '#37420A',
            DEFAULT: '#C4D347',
          },
          cyan: {
            50:  '#E6F6FC',
            100: '#CCEDFA',
            200: '#80D4F0',
            300: '#40BDE6',
            400: '#009DD6',
            500: '#0080AD',
            600: '#006385',
            700: '#00475E',
            800: '#002E3D',
            900: '#00171F',
            DEFAULT: '#009DD6',
          },
          green: {
            50:  '#EFF9F0',
            100: '#DEF3E1',
            200: '#B4E5BB',
            300: '#8FDA98',
            400: '#61CE70',
            500: '#44B854',
            600: '#35933F',
            700: '#276E2F',
            800: '#1A4A1F',
            900: '#0D2510',
            DEFAULT: '#61CE70',
          },
          orange: {
            50:  '#FEF1E8',
            100: '#FDE3D1',
            200: '#FBC7A3',
            300: '#F8AB75',
            400: '#F5934F',
            500: '#F36F21',
            600: '#D15A11',
            700: '#9C430D',
            800: '#672D08',
            900: '#341704',
            DEFAULT: '#F36F21',
          },
          red: {
            50:  '#FCEAE6',
            100: '#F9D5CD',
            200: '#F3AB9B',
            300: '#EC8169',
            400: '#DE4625',
            500: '#C13B1F',
            600: '#9A2F19',
            700: '#742313',
            800: '#4D180C',
            900: '#270C06',
            DEFAULT: '#DE4625',
          },
        },
        text: {
          primary:   '#333333',
          secondary: '#4F4F4F',
          tertiary:  '#7A7A7A',
        },
      },
    },
  },
}