Skip to content
Printer-friendly version

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:

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:

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.

Related Content
Questions:   Web Services Office | tsdweb@cde.ca.gov
Download Free Readers