Colors

Commonly used colors for Brown sites and apps.

PRIMARY COLOR PALETTE

There are four colors that make up Brown’s primary identity. To ensure consistency in production and reproduction, these colors cannot be lightened, darkened or otherwise adjusted. Please ensure that the correct color references are used at all times by following these specifications.

Name: red

Hex: #ed1c24

RGB: rgb(237, 28, 36)

Name: brown

Hex: #4e3629

RGB: rgb(78, 54, 41)

Name: gold

Hex: #ffc72c

RGB: rgb(255, 199, 44)

Name: gray (accent)

Hex: #98a4ae

RGB: rgb(152, 164, 174)

SECONDARY COLOR PALETTE

A set of secondary colors that complement the colors in the primary visual identity allow for broader artistic expression while also harmonizing with the primary color palette. Composed of contemporary colors, the secondary color palette will be maintained as a flexible palette that may be updated as color trends shift over time.

Name: sky-blue

Hex: #59cbe8

RGB: rgb(89, 203, 232)

Name: emerald

Hex: #00b398

RGB: rgb(0, 179, 152)

Name: navy

Hex: #003C71

RGB: rgb(0, 60, 113)

Name: taupe

Hex: #b7b09c

RGB: rgb(183, 176, 156)

Additional Colors and Usage

An additional array of color used in projects.

CSS Variables

:root {
  --idRed: #ed1c24;
  --brown: #4e3629;
  --gold: #ffc72c;
  --gray: #98a4ae;
  --skyBlue: #59cbe8;
  --emerald: #00b398;
  --darkEmerald: #008672;
  --navy: #003c71;
  --taupe: #b7b09c;
  --taupeBoarder: rgba(183, 176, 156, 0.2);
  --brownBorder: #d7d3c8;
  --red: #c00404;
  --redBright: #ed1c24;
  --yellow: var(--gold);
  --beige: var(--taupe);
  --lightBeige: #efece5;
  --sand: #ccc6b8;
  --lightBrown: #a79a94;
  --lightestBrown: #f8f7f5;
  --mediumBrown: #745d54;
  --darkBrown: #422d22;
  --bearBrown: #8b572a;
  --lightGold: #fef1cd;
  --white: #ffffff;
  --backgroundGray: #f7f7f7;
  --lightGray: #f0f3f5;
  --lightestGray: #fafafa;
  --mediumGray: #687078;
  --darkGray: #3c3c3c;
  --black: #000000;
  --softBlack: #434343;
  --transparentBlack: rgba(0, 0, 0, 0.15);
  --successBackground: #e0f4f1;
  --successForeground: var(--emerald);
  --errorBackground: #ebd9db;
  --errorForeground: #d0021b;
  --warningBackground: var(--lightGold);
  --warningForeground: var(--bearBrown);
}

As a JavaScript Object

const COLORS = {
  idRed: "#ED1C24",
  brown: "#4E3629",
  gold: "#FFC72C",
  gray: "#98A4AE",
  skyBlue: "#59CBE8",
  emerald: "#00B398",
  darkEmerald: "#008672",
  navy: "#003C71",
  taupe: "#B7B09C",
  taupeBoarder: "rgba(183,176,156,0.2)",
  red: "#C00404",
  yellow: "#FFC72C",
  beige: "#B7B09C",
  lightBeige: "#EFECE5",
  sand: "#CCC6B8",
  lightBrown: "#A79A94",
  lightestBrown: "#F8F7F5",
  mediumBrown: "#745D54",
  darkBrown: "#422d22",
  bearBrown: "#8b572a",
  lightGold: "#fef1cd",
  white: "#FFFFFF",
  backgroundGray: "#f7f7f7",
  lightGray: "#F0F3F5",
  mediumGray: "#687078",
  darkGray: "#3C3C3C",
  black: "#000000",
  softBlack: "#434343",
  transparentBlack: "rgba(0, 0, 0, 0.15)",
  successBackground: "#e0f4f1",
  successForeground: "#00B398",
  errorBackground: "#ebd9db",
  errorForeground: "#d0021b",
  warningBackground: "#fef1cd",
  warningForeground: "#8b572a",
};