Skip to main content
California Department of Education Logo

Color


This page is part of the California Department of Education (CDE) Web Design Standards, which only applies to specific CDE Web sites. Visit the CDE Web Standards to determine if these standards apply to a specific Web product (Web site, Web page, Web document, or Web application) that has been developed by or for the CDE.

Most Web pages (not including Web applications) on all CDE Web sites are created using Adobe's Contribute software templates. WebNETS, which is a custom software application that was created by CDE staff, is also necessary in order to create and process most Web pages on the CDE's public Internet site. Portions of these standards, where noted, apply only to CDE users of Contribute or WebNETS software; or to Web application developers.

Return to Design Standards

In order to maintain the common look and feel of the CDE Internet and Intranet Web sites, the use of color has been standardized. Generally, the use of color is governed by Cascading Style Sheets (CSS) only. Contribute templates are also based on CSS. Manually applying colors that deviate from those indicated in the appropriate CSS is not allowed.

These items are controlled by the CSS styles:

  • Topic Color(s) (Internet Only)
  • Selected Headings
  • Table header rows (text and background)
  • Alternating table rows (background)
  • Text size and color

Alerts

The default text color (usually black) may be changed to red to indicate an "alert". An alert is an important single word, short sentence, or fragment that communicates important information to the user. Red text indicating alerts should be used sparingly. Whole paragraphs may not have the color red applied. The following examples demonstrate the appropriate use of red text:

  • Do not complete this document.
  • Applications must be submitted by May 1, 2005.
  • Link text to Web page (New 01-Jan-2014)

The red that is used for alerts must be the standard color red (#FF0000). Below is an image of the text color selector in Contribute:

Screen capture of the text color selector mini-window in Contribute with the color red selected.

Shading Alternating Table Rows

Shading may be added to alternating table rows to help distinguish information on lengthy tables. Only the shadow site color for the Intranet, or the shadow site color for appropriate Internet topic area (see below) can be used to highlight alternating table rows. The text on the shadow site color must be black. Refer to the Tables section of the Web Design Standards for more information.

Intranet Web Site Colors

 

 

#364965

Contrast: 9.1:1
Passed W3C Level 3

Color Difference/Brightness: 537/185
Difference Passed W3C
Brightness Passed W3C

#4F6A92

Contrast: 5.5:1
Passed W3C Level 2

Color Difference/Brightness: 434/153
Difference Passed HP
Brightness Passed W3C

#CBD6E5

Contrast: 14.3:1
Passed W3C Level 3

Color Difference/Brightness is: 646/212
Difference Passed W3C
Brightness Passed W3C
#FFCC66

Contrast: 14.1:1
Passed W3C Level 3

Color Difference/Brightness is: 561/207
Difference Passed W3C
Brightness Passed W3C

Internet Web Site Colors

The CDE Web site is divided into eight topic areas, each with pre-defined authorized colors:

ARRA

#003366

Contrast: 12.6:1
Passed W3C Level 3

Color Difference/Brightness is: 612/214
Difference Passed W3C
Brightness Passed W3C

#447700

Contrast: 5.4:1
Passed W3C Level 2

Color Difference/Brightness is: 578/165
Difference Passed W3C
Brightness Passed W3C

#CCCCCC

Contrast: 13.1:1
Passed W3C Level 3

Color Difference/Brightness is: 612/204
Difference Passed W3C
Brightness Passed W3C

Board of Education

#000099

Contrast: 14.4:1
Passed W3C Level 3

Color Difference/Brightness is: 612/238
Difference Passed W3C
Brightness Passed W3C

#886541

Contrast: 5.3:1
Passed W3C Level 2

Color Difference/Brightness is: 463/148
Difference Passed HP
Brightness Passed W3C

#FFEEDD

Contrast: 18.5:1
Passed W3C Level 2

Color Difference/Brightness is: 714/241
Difference Passed W3C
Brightness Passed W3C

Curriculum & Instruction

#000099

Contrast: 14.4:1
Passed W3C Level 3

Color Difference/Brightness is: 612/238
Difference Passed W3C
Brightness Passed W3C

#3E71A4

Contrast: 5.1:1
Passed W3C Level 2

Color Difference/Brightness is: 426/152
Difference Passed HP
Brightness Passed W3C

#A4C4E2

Contrast: 11.6:1
Passed W3C Level 3

Color Difference/Brightness is: 586/189
Difference Passed W3C
Brightness Passed W3C

Data & Statistics

#850000

Contrast: 10.5:1
Passed W3C Level 3

Color Difference/Brightness is: 632/216
Difference Passed W3C
Brightness Passed W3C

#925F2C

Contrast: 5.4:1
Passed W3C Level 2

Color Difference/Brightness is: 480/151
Difference Passed HP
Brightness Passed W3C

#D0AD89

Contrast: 10.0:1
Passed W3C Level 3

Color Difference/Brightness is: 518/179
Difference Passed W3C
Brightness Passed W3C

Executive Office

#006464

Contrast: 7.0:1
Passed W3C Level 3

Color Difference/Brightness is: 565/185
Difference Passed W3C
Brightness Passed W3C

#577181

Contrast: 5.1:1
Passed W3C Level 2

Color Difference/Brightness is: 436/148
Difference Passed HP
Brightness Passed W3C

#F1F1F1

Contrast: 18.6:1
Passed W3C Level 3

Color Difference/Brightness is: 723/241
Difference Passed W3C
Brightness Passed W3C

Finance & Grants

#1E5100

Contrast: 9.4:1
Passed W3C Level 3

Color Difference/Brightness is: 654/199
Difference Passed W3C
Brightness Passed W3C

#447744

Contrast: 5.3:1
Passed W3C Level 2

Color Difference/Brightness is: 510/158
Difference Passed W3C
Brightness Passed W3C

#99CC99

Contrast: 11.5:1
Passed W3C Level 3

Color Difference/Brightness is: 510/182
Difference Passed W3C
Brightness Passed W3C

Learning Support

#3D3D70

Contrast: 10.0:1
Passed W3C Level 3

Color Difference/Brightness is: 531/189
Difference Passed W3C
Brightness Passed W3C

#68689B

Contrast: 5.2:1
Passed W3C Level 2

Color Difference/Brightness is: 402/146
Difference Passed HP
Brightness Passed W3C

#DDDDFF

Contrast: 15.9:1
Passed W3C Level 3

Color Difference/Brightness is: 697/224
Difference Passed W3C
Brightness Passed W3C

Newsroom

#006464

Contrast: 7.0:1
Passed W3C Level 2

Color Difference/Brightness is: 565/185
Difference Passed W3C
Brightness Passed W3C

#577181

Contrast: 5.1:1
Passed W3C Level 2

Color Difference/Brightness is: 436/148
Difference Passed HP
Brightness Passed W3C

#F1F1F1

Contrast: 18.6:1
Passed W3C Level 3

Color Difference/Brightness is: 723/241
Difference Passed W3C
Brightness Passed W3C

NCLB

#000099

Contrast: 14.4:1
Passed W3C Level 3

Color Difference/Brightness is: 612/238
Difference Passed W3C
Brightness Passed W3C

#886541

Contrast: 5.3:1
Passed W3C Level 2

Color Difference/Brightness is: 463/148
Difference Passed HP
Brightness Passed W3C

#FFEEDD

Contrast: 18.5:1
Passed W3C Level 3

Color Difference/Brightness is: 714/241
Difference Passed W3C
Brightness Passed W3C

Professional Development

#103D3D

Contrast: 12.0:1
Passed W3C Level 3

Color Difference/Brightness is: 627/208
Difference Passed W3C
Brightness Passed W3C

#427575

Contrast: 5.3:1
Passed W3C Level 2

Color Difference/Brightness is: 465/154
Difference Passed HP
Brightness Passed W3C

#99CCCC

Contrast: 11.9:1
Passed W3C Level 3

Color Difference/Brightness is: 561/188
Difference Passed W3C
Brightness Passed W3C

Resources (Base)

#000066

Contrast: 17.6:1
Passed W3C Level 3

Color Difference/Brightness is: 663/244
Difference Passed W3C
Brightness Passed W3C

#4F6A92

Contrast: 5.3:1
Passed W3C Level 2

Color Difference/Brightness is: 434/153
Difference Passed HP
Brightness Passed W3C

#DDEEFF

Contrast: 17.7:1
Passed W3C Level 3

Color Difference/Brightness is: 714/234
Difference Passed W3C
Brightness Passed W3C

Specialized Programs

#3C3C00

Contrast: 11.4:1
Passed W3C Level 3

Color Difference/Brightness is: 645/202
Difference Passed W3C
Brightness Passed W3C

#70703D

Contrast: 5.2:1
Passed W3C Level 2

Color Difference/Brightness is: 480/149
Difference Passed HP
Brightness Passed W3C

#CDCDAA

Contrast: 10.4:1
Passed W3C Level 3

Color Difference/Brightness is: 520/181
Difference Passed W3C
Brightness Passed W3C

Testing & Accountability

#663300

Contrast: 10.3:1
Passed W3C Level 3

Color Difference/Brightness is: 612/195
Difference Passed W3C
Brightness Passed W3C

#6E6E6E

Contrast: 5.1:1
Passed W3C Level 2

Color Difference/Brightness is: 435/145
Difference Passed HP
Brightness Passed W3C

#CCCCCC

Contrast: 13.1:1
Passed W3C Level 3

Color Difference/Brightness is: 612/204
Difference Passed W3C
Brightness Passed W3C

Site Color Test Pages (CDE Intranet)
Pages setup throughout the CDE Internet site on the Staging server to test the CSS and ensure that colors for all elements are displaying correctly.

Generic Header

Anytime a generic header is used (e.g. Web applications, online publications, etc.), the colors associated with the “Resources” topic are to be used.

Example of a generic header (note, no topics are available):

Web Applications

Use the styles that are specified in the Department-wide CSS files. Whenever the Department-wide CSS files cannot be used, ensure that colors used in Web applications strictly match the colors and their usage in the appropriate area of the CDE Intranet or Internet Web sites.

Other shading with color may be allowed under certain circumstances. Contact the Web Services Office for more information.

Questions:   Web Services Office | tsdweb@cde.ca.gov
Last Reviewed: Tuesday, May 26, 2015

Share this Page

Related Content

  • Exceptions
    The Exceptions section of the California Department of Education's Web Design Standards.
  • Headings
  • Text Styles
    The Text Styles section of the California Department of Education's Web Design Standards.

Recently Posted in Department Information

  • Objection to Disclosure of Student Information (PDF) (added 01-Feb-2016)
    Notice provided pursuant to the Family Educational Rights and Privacy Act (FERPA) regarding the Court’s Order in Morgan Hill Concerned Parents Association and the Concerned Parent Association v. California Department of Ed
  • Notice of Disclosure of Student Records (PDF) (added 01-Feb-2016)
    Notice provided pursuant to the Family Educational Rights and Privacy Act (FERPA) regarding the Court’s Order in Morgan Hill Concerned Parents Association and the Concerned Parent Association v. California Department of Ed
  • Morgan Hill Case (added 01-Feb-2016)
    Notice provided pursuant to the Family Educational Rights and Privacy Act (FERPA) regarding the Court’s Order in Morgan Hill Concerned Parents Association and the Concerned Parent Association v. California Department of Education.
  • EEUCPAO Annual Summary (added 29-Jan-2016)
    The EEUCPAO Annual Summary of UCP Discrimination Appeals (received on or after July 1, 2015)
  • Frequently Asked Questions (added 29-Jan-2016)
    School Success and Opportunity Act (Assembly Bill 1266) Frequently Asked Questions.

  • Legal Advisory (added 29-Jan-2016)
    Legal Advisory regarding application of California’s antidiscrimination statutes to transgender youth in schools.
  • Nondiscrimination in Public Schools brochure (DOC) (added 29-Jan-2016)
    The California Department of Education is committed to and expects school districts to create and maintain a non-discriminatory and safe learning environment.
  • Associate Governmental Program Analyst (DOC) (added 26-Jan-2016)
    Bulletin advertising for an Associate Governmental Program Analyst vacant position in the Nutrition Services Division. May consider Staff Services Analyst.
  • Education Programs Consultant (DOC) (added 26-Jan-2016)
    Bulletin advertising for an Education Programs Consultant vacant position in the Improvement & Accountability Division. May consider an Education Programs Assistant.
  • Automotive Equipment Operator II QAQ (DOC) (added 19-Jan-2016)
    Qualifications Assessment Questionnaire for the Automotive Equipment Operator II exam in the CA Dept of Education.