Black#000000
White#FFFFFF
Light Gray#E6E6E6
Dim Gray#4D4D4D
Palette direction

Black White Medfood Color Palette

This palette is inspired by the consistent and professional black and white tones of the image, emphasizing clarity, simplicity, and trustworthiness. The main colors provide strong contrast and recognition, while the support and neutral colors maintain a clean, approachable, and modern feel suitable for a healthcare-related brand.

MonochromaticHealth Wellnessblackwhitehealthcareclean
palette-preview.example
Health Wellness color direction

Black White Medfood Color Palette

This palette is inspired by the consistent and professional black and white tones of the image, emphasizing clarity, simplicity, and trustworthiness. The main colors provide strong contrast and recognition, while the support and neutral colors maintain a clean, approachable, and modern feel suitable for a healthcare-related brand.

Explore the color system7 colors mapped to roles
Logo contrast guide

Logo color pairings

Each column shows a usable logo color on a palette background, with contrast checked for clarity.

Logo White #FFFFFF
on Black #000000

21.0:1 Excellent

Logo Black #000000
on White #FFFFFF

21.0:1 Excellent

Logo Black #000000
on Light Gray #E6E6E6

16.8:1 Excellent
Business card

Printed materials without guessing.

A neutral card system with the logo color, contact text, and a restrained palette accent.

Avery Stone Palette designer avery@example.com colorfly.design
Mobile website

The palette has to survive the small screen.

A mobile landing page preview with logo, navigation, headline, CTA, content card, and chart color usage.

Health Wellness Black White Medfood Color Palette

The main colors are classic black and off-white tones that provide strong contrast and timeless recognition, creating a trustworthy and professional visual identity.

Analytics system

Dashboards need more than one pretty color.

Numbers, pie charts, bars, stacked bars, and lines reveal whether the palette can support real product interfaces.

Revenue$84.2k+18.4%
Retention72%Stable
Signals7Monochromatic
Audience split
Monthly growth
Trend line

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Black #000000
HeadlineUsed for main titles and key messages.Black #000000
LinkUsed for links and interactive text.Black #000000

Buttons

Primary Button
Contrast21.00:1AA
BackgroundBlack #000000
TextWhite #FFFFFF
Secondary Button
Contrast1.25:1Low
BackgroundLight Gray #E6E6E6
TextWhite #FFFFFF
Outlined Button
Contrast21.00:1AA
BorderBlack #000000
TextBlack #000000

Interface

TextDefault readable body text.Near Black #1A1A1A
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Near White #F7F7F7
IconSmall interface icons and marks.Light Gray #E6E6E6
BorderCards, inputs, and component borders.Dim Gray #4D4D4D
DividerSubtle separators between content.Light Gray #E6E6E6
OutlineFocus rings and emphasis outlines.Dim Gray #4D4D4D

Print Color Values

CMYK values are calculated from HEX by default. Adjust them only when preparing print materials.

Screen colors stay unchanged.Manual CMYK edits are used in exports and handoff.
Calculated CMYK
BlackMain color - #000000
Calculated CMYK
WhiteMain color - #FFFFFF
Calculated CMYK
Light GraySupport color - #E6E6E6
Calculated CMYK
Dim GraySupport color - #4D4D4D
Calculated CMYK
WhiteNeutral color - #FFFFFF
Calculated CMYK
Near WhiteNeutral color - #F7F7F7
Calculated CMYK
Near BlackNeutral color - #1A1A1A

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

The main colors are classic black and off-white tones that provide strong contrast and timeless recognition, creating a trustworthy and professional visual identity.

PrimaryBlack

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline

Black provides authority and sophistication, emphasizing professionalism and clarity.

HEX#000000
RGB0, 0, 0
HSL0, 0, 0
CMYK0, 0, 0, 100
SecondaryWhite

RolesBg Light, Btn Secondary Text

White conveys cleanliness, simplicity, and openness, balancing the depth of black.

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0

Support Colors

Support colors are subtle gray tones that extend the palette's visual depth, providing nuance and balance without competing with the strong black and white main colors.

Light Gray

RolesBtn Secondary Bg, Icon, Divider

Light Gray offers a soft, neutral backdrop for secondary elements, supporting clarity and hierarchy.

HEX#E6E6E6
RGB230, 230, 230
HSL0, 0, 90
CMYK0, 0, 0, 10
Dim Gray

RolesBorder, Outline

Dim Gray provides a medium contrast tone perfect for borders and outlines, reinforcing the structure without overpowering.

HEX#4D4D4D
RGB77, 77, 77
HSL0, 0, 30
CMYK0, 0, 0, 70

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

White

RolesBtn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Near White

RolesBg Dark

HEX#F7F7F7
RGB247, 247, 247
HSL0, 0, 97
CMYK0, 0, 0, 3
Near Black

RolesText

HEX#1A1A1A
RGB26, 26, 26
HSL0, 0, 10
CMYK0, 0, 0, 90

Export and Handoff

Copy palette values for design systems, websites, and client handoff. You can also copy this palette for Logo Export on myLogo.review, so your colors are ready there in one click.

Color tokens

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-black: #000000;
  --color-white: #FFFFFF;
  --color-light-gray: #E6E6E6;
  --color-dim-gray: #4D4D4D;
  --color-near-white: #F7F7F7;
  --color-near-black: #1A1A1A;
}

Role tokens

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: #000000;
  --role-link: #000000;
  --role-btn-primary-bg: #000000;
  --role-btn-outlined-border: #000000;
  --role-btn-outlined-text: #000000;
  --role-headline: #000000;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-btn-secondary-bg: #E6E6E6;
  --role-icon: #E6E6E6;
  --role-divider: #E6E6E6;
  --role-border: #4D4D4D;
  --role-outline: #4D4D4D;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #F7F7F7;
  --role-text: #1A1A1A;
}

JSON

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.
{
    "black": "#000000",
    "white": "#FFFFFF",
    "light-gray": "#E6E6E6",
    "dim-gray": "#4D4D4D",
    "near-white": "#F7F7F7",
    "near-black": "#1A1A1A"
}
Press Space to load new palette