VK color palette
SocialVK's color identity is defined by a distinctive blue primary color, complemented by a clean, neutral UI palette. The brand emphasizes clarity and approachability in its digital presence.
vk.comVK colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- VK BluePrimary0, 119, 255
- VK SlateSecondary109, 120, 133
- VK CyanAccent0, 200, 255
Surfaces
Page, cards and dividers.- VK Light GrayBackground245, 246, 248
- VK WhiteSurface255, 255, 255
- VK Border GrayBorder225, 227, 230
Text
Three tiers of copy.- VK BlackText34, 34, 34
- VK GraySecondary text129, 140, 153
- VK Muted GrayMuted text184, 193, 204
Semantic
Feedback and state colors.- VK GreenSuccess75, 179, 75
- VK OrangeWarning255, 160, 0
- VK RedError230, 70, 70
- VK Info BlueInfo38, 136, 235
Use VK's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
vk-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2688EB;
--error: #E64646;
--accent: #00C8FF;
--border: #E1E3E6;
--primary: #0077FF;
--success: #4BB34B;
--surface: #FFFFFF;
--warning: #FFA000;
--secondary: #6D7885;
--text-muted: #B8C1CC;
--background: #F5F6F8;
--text-primary: #222222;
--text-secondary: #818C99;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.7:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
3.2:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
3.4:1
Fail
Muted text on background
Needs 3:1 for large text
1.7:1
Fail
Muted text on surface
Needs 3:1 for large text
1.8:1
Fail
VK background, border and text colors
The quiet part of the VK palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- VK Light GrayBackground
- HEX
- RGB
- HSL
- VK WhiteSurface
- HEX
- RGB
- HSL
- VK Border GrayBorder
- HEX
- RGB
- HSL
- VK BlackText
- HEX
- RGB
- HSL
- VK GraySecondary text
- HEX
- RGB
- HSL
- VK Muted GrayMuted text
- HEX
- RGB
- HSL
About VK's colors
VK's palette centers on a vibrant blue, evoking trust and communication, supported by neutral grays for clarity. The accent cyan and semantic colors provide functional contrast and accessibility.
Primary blue is paired with neutral backgrounds for readability.
Accent cyan highlights interactive elements.
Semantic colors (green, orange, red) signal status and feedback.
Psychology
Blue conveys reliability and openness, aligning with VK's role as a social platform. The neutral grays and whites create a clean, modern interface that feels approachable.
Evolution
VK's palette has remained stable, with minor adjustments to blue and gray tones for digital clarity. The brand has consistently prioritized a simple, functional color system.
Where VK uses each color
- Primary
VK Blue is used for main navigation bars, primary buttons, and key interactive elements.
- Secondary
VK Slate appears in secondary buttons, icons, and less prominent UI elements.
- Accent
VK Cyan highlights notifications, active states, and special features.
- Backgrounds
VK Light Gray and VK White are used for app backgrounds and content surfaces.
- Text
VK Black is used for main text, VK Gray for secondary text, and VK Muted Gray for placeholders or disabled states.
- Semantic
VK Green, Orange, and Red denote success, warning, and error states throughout the interface.
VK color questions
Hex codes, RGB values, neutrals and how to use the palette.
The VK primary color is #0077FF, known as VK Blue. It is used for main branding and primary UI elements.
VK Blue (#0077FF) has an RGB value of (0, 119, 255). In CMYK, it is approximately (100, 53, 0, 0).
VK uses VK Light Gray (#F5F6F8), VK Border Gray (#E1E3E6), VK Gray (#818C99), and VK Muted Gray (#B8C1CC) for backgrounds, borders, and secondary text. These neutrals create a clean and readable interface.
Use VK Blue (#0077FF) for primary actions and navigation, with neutrals for backgrounds and text. Accent and semantic colors should highlight interactive or status elements only.
The secondary color is VK Slate, #6D7885, and the accent is VK Cyan, #00C8FF. Together with the primary they make up the three brand colors at the top of this page.
2 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies VK's colors consistently when it generates UI.
Make something in the spirit of VK
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.