This palette draws from the vibrant blues and yellows in the University of Rizal System emblem, balanced by grounded neutrals to ensure clarity and versatility across applications. The main colors capture trust and energy, while support colors provide subtle accentuations without overpowering the core palette.
This palette draws from the vibrant blues and yellows in the University of Rizal System emblem, balanced by grounded neutrals to ensure clarity and versatility across applications. The main colors capture trust and energy, while support colors provide subtle accentuations without overpowering the core palette.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The palette uses a bold royal blue as the base, paired with a vivid yellow and a saturated cyan blue, creating a split-complementary harmony that feels dynamic yet cohesive.
Clear roles create a consistent brand experience.Assign existing palette colors to brand, typography, and interface roles.
A compact view of the brand, support, and neutral colors that make up this system.
The palette uses a bold royal blue as the base, paired with a vivid yellow and a saturated cyan blue, creating a split-complementary harmony that feels dynamic yet cohesive.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Royal Blue evokes trust, professionalism, and academic excellence, anchoring the palette firmly in an educational context.
#0033A00, 51, 160221, 100, 31100, 68, 0, 37RolesHeadline
Vivid Yellow injects energy, optimism, and attention, perfect for call-to-action text and headlines.
#FFD300255, 211, 050, 100, 500, 17, 100, 0RolesBtn Secondary Bg
Cyan Blue complements Royal Blue with a fresher, lighter tone that supports secondary buttons with clarity and approachability.
#007ACC0, 122, 204204, 100, 40100, 40, 0, 20Support colors bring a grounded balance to the bright main palette by introducing a soft green and medium slate blue, helping in organizing UI elements and subtle accents without overwhelming.
RolesIcon, Border, Divider, Outline
Sage Green offers a natural, muted tone that complements the blues and yellows, providing a calming counterbalance and aiding visual hierarchy.
#669966102, 153, 102120, 20, 5033, 0, 33, 40Medium Slate Blue extends the blue range with a softer, more subdued shade that harmonizes with primary tones while reducing visual intensity.
#5472AE84, 114, 174220, 36, 5152, 34, 0, 32Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F4F4F4244, 244, 2440, 0, 960, 0, 0, 4RolesText
#22222234, 34, 340, 0, 130, 0, 0, 87Copy palette values for design systems, websites, and client handoff.
Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.
Use when: you need the actual colors.:root {
--color-royal-blue: #0033A0;
--color-vivid-yellow: #FFD300;
--color-cyan-blue: #007ACC;
--color-sage-green: #669966;
--color-medium-slate-blue: #5472AE;
--color-white: #FFFFFF;
--color-alabaster: #F4F4F4;
--color-rich-black: #222222;
}Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.
Use when: you need UI roles, not just swatches.:root {
--role-logo: #0033A0;
--role-link: #0033A0;
--role-btn-primary-bg: #0033A0;
--role-btn-outlined-border: #0033A0;
--role-btn-outlined-text: #0033A0;
--role-headline: #FFD300;
--role-btn-secondary-bg: #007ACC;
--role-icon: #669966;
--role-border: #669966;
--role-divider: #669966;
--role-outline: #669966;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #F4F4F4;
--role-text: #222222;
}Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.
Use when: a developer or app needs data.{
"royal-blue": "#0033A0",
"vivid-yellow": "#FFD300",
"cyan-blue": "#007ACC",
"sage-green": "#669966",
"medium-slate-blue": "#5472AE",
"white": "#FFFFFF",
"alabaster": "#F4F4F4",
"rich-black": "#222222"
}