Color Palette

This page demonstrates the Depictio brand colors and how to use them in your applications.

Brand Colors

The Depictio brand uses a consistent color palette to maintain visual identity across all platforms and applications.

Purple
#9966CC

Violet
#7A5DC7

Blue
#6495ED

Teal
#45B8AC

Green
#8BC34A

Yellow
#F9CB40

Orange
#F68B33

Pink
#E6779F

Red
#E53935

Black
#000000

Using the Colors in Your Code

Python

# Colors definition for Python applications
colors = {
    "purple": "#9966CC",
    "violet": "#7A5DC7",
    "blue": "#6495ED",
    "teal": "#45B8AC",
    "green": "#8BC34A",
    "yellow": "#F9CB40",
    "orange": "#F68B33",
    "pink": "#E6779F",
    "red": "#E53935",
    "black": "#000000",
}

# Color combinations
color_sequences = {
    "main": [colors["purple"], colors["blue"], colors["teal"], colors["green"],
            colors["yellow"], colors["orange"], colors["pink"]],
    "cool": [colors["purple"], colors["violet"], colors["blue"], colors["teal"]],
    "warm": [colors["yellow"], colors["orange"], colors["red"], colors["pink"]],
    "alert": [colors["green"], colors["yellow"], colors["orange"], colors["red"]],
}

# Example usage with Plotly
import plotly.express as px

fig = px.scatter(df, x="x", y="y", color="group",
                 color_discrete_sequence=color_sequences["main"])

React (Mantine)

// Register the palette as a Mantine colour, then use it by name.
import { Button, MantineProvider, createTheme } from "@mantine/core";

const theme = createTheme({
  colors: {
    depictio: [
      "#f2f6fd", "#e0e9fa", "#bed2f5", "#99b9f0", "#7aa4ec",
      "#6495ed", "#5a8ad4", "#4a73b0", "#3b5c8d", "#2b456a",
    ],
  },
  primaryColor: "depictio",
});

<MantineProvider theme={theme}>
  <Button>Primary Action</Button>
</MantineProvider>;

CSS

:root {
  --depictio-purple: #9966cc;
  --depictio-violet: #7a5dc7;
  --depictio-blue: #6495ed;
  --depictio-teal: #45b8ac;
  --depictio-green: #8bc34a;
  --depictio-yellow: #f9cb40;
  --depictio-orange: #f68b33;
  --depictio-pink: #e6779f;
  --depictio-red: #e53935;
  --depictio-black: #000000;
}

.btn-primary {
  background-color: var(--depictio-blue);
  color: white;
}

.btn-danger {
  background-color: var(--depictio-red);
  color: white;
}

.btn-success {
  background-color: var(--depictio-green);
  color: white;
}