Color Palette
Relevant source files
The following files were used as context for generating this wiki page:
- style.css
- index.html
- README.md
- cid:css-670a3ecc-a2ba-4a93-a354-42b9adfe4f2a@mhtml.blink (Internal CSS Resource 1)
- cid:css-5162b878-4e38-424a-ad68-4cdf1cc233a8@mhtml.blink (Internal CSS Resource 2)
The Color Palette of the Google Clone project defines the visual identity and user interface consistency across the application. It encompasses the primary brand colors used in the logo, the functional colors used for navigation and text, and the background/border shades used for structural elements.
The implementation relies on CSS classes to apply specific hex codes to text and structural components, ensuring that the interface mirrors the recognizable aesthetic of the Google search engine.
Sources: style.css:16-21, index.html:43-45
Core Brand Colors
The project implements a set of specific color classes to represent the Google brand. These are primarily utilized within the .logo container to style individual characters.
Brand Color Mapping
The following table detail the primary brand colors defined in the stylesheet:
| Class Name | Hex Code | Usage Context |
|---|---|---|
.blue | #4285F4 | First 'G' and fourth 'g' in logo |
.red | #EA4335 | Second 'o' and sixth 'e' in logo |
.yellow | #FBBC05 | Third 'o' in logo |
.green | #34A853 | Fifth 'l' in logo |
Sources: style.css:22-25, index.html:44
Visual Hierarchy Diagram
The diagram below illustrates how brand colors are applied to the UI components to form the logo.
The brand colors are applied sequentially to spans within the logo div.
Sources: index.html:44, style.css:16-25
Interface and Functional Colors
Beyond the primary brand colors, the system utilizes a range of functional colors for typography, interactive states, and structural separation.
Text and Background Colors
The project defines global text colors and background settings to ensure readability and mimic the original platform's minimalist design.
- Primary Text: The body utilizes
#1f1f1ffor high contrast against white backgrounds. Sources: index.html:15 - Link Colors: Standard links use
rgb(104, 29, 168)(a purple shade), while specialized links like.flusergb(26, 115, 232). Sources: index.html:112-114 - Secondary Text: Navigation and footer links often use
rgb(112, 117, 122)to appear less prominent than primary content. Sources: index.html:128, index.html:171
Interaction and State Colors
Colors are adjusted dynamically based on user interaction (hover states) to provide visual feedback.
The button transitions from a light gray background to a slightly more defined border and shadow on hover.
Sources: style.css:54-66
Structural Borders and Shading
The application uses subtle grays for borders and background sections to create depth without overwhelming the user.
- Search Input Border:
#dfe1e5is used for the default state of the search wrapper. Sources: style.css:35 - Header/Footer Background: Sections like
#gb(Google Bar) and#footerusergb(236, 237, 238)for distinct horizontal banding. Sources: index.html:125, index.html:169 - Dividers: Horizontal rules (
hr) are styled withrgb(218, 220, 224). Sources: index.html:162
Implementation Examples
The color palette is applied through inline styles for legacy elements and external CSS for modern components.
/* Application of primary brand colors */
.blue { color: #4285F4; }
.red { color: #EA4335; }
/* Functional color for buttons */
button {
background-color: #f8f9fa;
color: #3c4043;
}
Sources: style.css:22-23, style.css:54-57
<!-- Structural color application in HTML -->
<body style="color:#1f1f1f">
<div id="footer" style="background-color: rgb(236, 237, 238)">
Sources: index.html:15, index.html:169
Summary
The "Color Palette" system is a critical component of the Google Clone's design language. By strictly adhering to the #4285F4, #EA4335, #FBBC05, and #34A853 brand colors and supporting them with a functional gray-scale (ranging from #f8f9fa to #1f1f1f), the project successfully replicates the clean and professional interface of the target application.