A colour system built from one green.
Every colour on this page grows from Arcadia's own brand green, #00461E, and three metal tones. Each palette is shown on a small page, in light and dark, with every text colour tested against the international readability standard (WCAG): AA is the legal minimum for body text, AAA is the strongest level.
#00461E · the seed#9A7B4F#C8B282#A66844The brand green looks most expensive on headings, the logo, buttons and lines, with a light ground around it. Large areas of very dark green read heavy.
Bronze, brass or copper on hairlines, small labels and links. Never for long text on a light ground unless it is the darker step shown here.
Pick one metal for the whole site. Two metals together start to look like a hotel lobby.
Seal & Stone Recommended
The green becomes the ink and the seal, not the wallpaper. A warm stone ground, bronze hairlines. Answers "I don't like the green": the green is still the brand, used where it looks expensive.
What we do · Partners · ContactAn independent investment and advisory firm in Abu Dhabi.
#F9F7EE#FFFFFF#0B3419#525046#00461E#684918#DDDBD2#00461E#F9F7EE| Pair | Contrast | Level | |
|---|---|---|---|
| Body text | 12.88:1 | AAA | |
| Secondary text | 7.54:1 | AAA | |
| Brand green as text | 10.33:1 | AAA | |
| Accent as text | 7.66:1 | AAA | |
| Button label | 10.33:1 | AAA | |
| Text on cards | 13.82:1 | AAA |
What we do · Partners · ContactAn independent investment and advisory firm in Abu Dhabi.
#08200F#0B3419#F9F7EE#C3C1B8#9BD0A7#D2BF95#114925#D2BF95#08200F| Pair | Contrast | Level | |
|---|---|---|---|
| Body text | 15.99:1 | AAA | |
| Secondary text | 9.51:1 | AAA | |
| Brand green as text | 9.78:1 | AAA | |
| Accent as text | 9.5:1 | AAA | |
| Button label | 9.5:1 | AAA | |
| Text on cards | 12.88:1 | AAA |
Copy the colour codes (CSS)
:root {
--arc-bg: #F9F7EE;
--arc-surface: #FFFFFF;
--arc-ink: #0B3419;
--arc-muted: #525046;
--arc-brand: #00461E;
--arc-accent: #684918;
--arc-line: #DDDBD2;
--arc-button: #00461E;
--arc-button-text: #F9F7EE;
}
[data-theme="dark"] {
--arc-bg: #08200F;
--arc-surface: #0B3419;
--arc-ink: #F9F7EE;
--arc-muted: #C3C1B8;
--arc-brand: #9BD0A7;
--arc-accent: #D2BF95;
--arc-line: #114925;
--arc-button: #D2BF95;
--arc-button-text: #08200F;
}Seal & Brass
For a darker, more cinematic site: a deep green ground, two steps lighter than the drafts the client found too dark, with brass for emphasis.
What we do · Partners · ContactAn independent investment and advisory firm in Abu Dhabi.
#FEF6E6#FFFFFF#0B3419#525046#00461E#4C3A10#E7D9BB#114925#FEF6E6| Pair | Contrast | Level | |
|---|---|---|---|
| Body text | 12.86:1 | AAA | |
| Secondary text | 7.53:1 | AAA | |
| Brand green as text | 10.31:1 | AAA | |
| Accent as text | 10.18:1 | AAA | |
| Button label | 9.75:1 | AAA | |
| Text on cards | 13.82:1 | AAA |
What we do · Partners · ContactAn independent investment and advisory firm in Abu Dhabi.
#114925#0B3419#FEF6E6#E7D9BB#C0E6C8#D2BF95#1B5F32#D2BF95#08200F| Pair | Contrast | Level | |
|---|---|---|---|
| Body text | 9.75:1 | AAA | |
| Secondary text | 7.51:1 | AAA | |
| Brand green as text | 7.68:1 | AAA | |
| Accent as text | 5.8:1 | AA | |
| Button label | 9.5:1 | AAA | |
| Text on cards | 12.86:1 | AAA |
Copy the colour codes (CSS)
:root {
--arc-bg: #FEF6E6;
--arc-surface: #FFFFFF;
--arc-ink: #0B3419;
--arc-muted: #525046;
--arc-brand: #00461E;
--arc-accent: #4C3A10;
--arc-line: #E7D9BB;
--arc-button: #114925;
--arc-button-text: #FEF6E6;
}
[data-theme="dark"] {
--arc-bg: #114925;
--arc-surface: #0B3419;
--arc-ink: #FEF6E6;
--arc-muted: #E7D9BB;
--arc-brand: #C0E6C8;
--arc-accent: #D2BF95;
--arc-line: #1B5F32;
--arc-button: #D2BF95;
--arc-button-text: #08200F;
}Celadon
A softer, mineral grey-green, closer to sage. Calm and modern; reads less "traditional bank". The seal green stays in the logo only.
What we do · Partners · ContactAn independent investment and advisory firm in Abu Dhabi.
#EBFBF5#FFFFFF#0B1F19#275B4B#00461E#275B4B#C4E3D8#1B463A#EBFBF5| Pair | Contrast | Level | |
|---|---|---|---|
| Body text | 16.05:1 | AAA | |
| Secondary text | 7.32:1 | AAA | |
| Brand green as text | 10.37:1 | AAA | |
| Accent as text | 7.32:1 | AAA | |
| Button label | 9.91:1 | AAA | |
| Text on cards | 17.15:1 | AAA |
What we do · Partners · ContactAn independent investment and advisory firm in Abu Dhabi.
#0B1F19#123229#EBFBF5#A1CCBD#A1CCBD#D2BF95#1B463A#A1CCBD#0B1F19| Pair | Contrast | Level | |
|---|---|---|---|
| Body text | 16.05:1 | AAA | |
| Secondary text | 9.71:1 | AAA | |
| Brand green as text | 9.71:1 | AAA | |
| Accent as text | 9.5:1 | AAA | |
| Button label | 9.71:1 | AAA | |
| Text on cards | 12.98:1 | AAA |
Copy the colour codes (CSS)
:root {
--arc-bg: #EBFBF5;
--arc-surface: #FFFFFF;
--arc-ink: #0B1F19;
--arc-muted: #275B4B;
--arc-brand: #00461E;
--arc-accent: #275B4B;
--arc-line: #C4E3D8;
--arc-button: #1B463A;
--arc-button-text: #EBFBF5;
}
[data-theme="dark"] {
--arc-bg: #0B1F19;
--arc-surface: #123229;
--arc-ink: #EBFBF5;
--arc-muted: #A1CCBD;
--arc-brand: #A1CCBD;
--arc-accent: #D2BF95;
--arc-line: #1B463A;
--arc-button: #A1CCBD;
--arc-button-text: #0B1F19;
}Copper Patina
Green with copper, like old metal: warmer and more distinctive in the Gulf, where navy-and-gold is everywhere.
What we do · Partners · ContactAn independent investment and advisory firm in Abu Dhabi.
#F9F7EE#FFFFFF#1D1B12#525046#00461E#7A3C13#DDDBD2#7A3C13#F9F7EE| Pair | Contrast | Level | |
|---|---|---|---|
| Body text | 16.07:1 | AAA | |
| Secondary text | 7.54:1 | AAA | |
| Brand green as text | 10.33:1 | AAA | |
| Accent as text | 7.88:1 | AAA | |
| Button label | 7.88:1 | AAA | |
| Text on cards | 17.24:1 | AAA |
What we do · Partners · ContactAn independent investment and advisory firm in Abu Dhabi.
#1D1B12#2E2B22#F9F7EE#C3C1B8#9BD0A7#EDB292#403D34#EDB292#1D1B12| Pair | Contrast | Level | |
|---|---|---|---|
| Body text | 16.07:1 | AAA | |
| Secondary text | 9.56:1 | AAA | |
| Brand green as text | 9.83:1 | AAA | |
| Accent as text | 9.35:1 | AAA | |
| Button label | 9.35:1 | AAA | |
| Text on cards | 13.18:1 | AAA |
Copy the colour codes (CSS)
:root {
--arc-bg: #F9F7EE;
--arc-surface: #FFFFFF;
--arc-ink: #1D1B12;
--arc-muted: #525046;
--arc-brand: #00461E;
--arc-accent: #7A3C13;
--arc-line: #DDDBD2;
--arc-button: #7A3C13;
--arc-button-text: #F9F7EE;
}
[data-theme="dark"] {
--arc-bg: #1D1B12;
--arc-surface: #2E2B22;
--arc-ink: #F9F7EE;
--arc-muted: #C3C1B8;
--arc-brand: #9BD0A7;
--arc-accent: #EDB292;
--arc-line: #403D34;
--arc-button: #EDB292;
--arc-button-text: #1D1B12;
}High contrast (accessibility)
Required variant for visitors who need stronger contrast. Every text pair reaches AAA (7:1). Same identity, nothing faded.
What we do · Partners · ContactAn independent investment and advisory firm in Abu Dhabi.
#FFFFFF#F9F7EE#08200F#0B3419#00461E#3A2709#525046#00461E#FFFFFF| Pair | Contrast | Level | |
|---|---|---|---|
| Body text | 17.16:1 | AAA | |
| Secondary text | 13.82:1 | AAA | |
| Brand green as text | 11.08:1 | AAA | |
| Accent as text | 14.25:1 | AAA | |
| Button label | 11.08:1 | AAA | |
| Text on cards | 15.99:1 | AAA |
What we do · Partners · ContactAn independent investment and advisory firm in Abu Dhabi.
#0A0F0C#08200F#FFFFFF#EFEDE4#C0E6C8#E7D9BB#C3C1B8#E7D9BB#0A0F0C| Pair | Contrast | Level | |
|---|---|---|---|
| Body text | 19.33:1 | AAA | |
| Secondary text | 16.48:1 | AAA | |
| Brand green as text | 14.17:1 | AAA | |
| Accent as text | 13.84:1 | AAA | |
| Button label | 13.84:1 | AAA | |
| Text on cards | 17.16:1 | AAA |
Copy the colour codes (CSS)
:root {
--arc-bg: #FFFFFF;
--arc-surface: #F9F7EE;
--arc-ink: #08200F;
--arc-muted: #0B3419;
--arc-brand: #00461E;
--arc-accent: #3A2709;
--arc-line: #525046;
--arc-button: #00461E;
--arc-button-text: #FFFFFF;
}
[data-theme="dark"] {
--arc-bg: #0A0F0C;
--arc-surface: #08200F;
--arc-ink: #FFFFFF;
--arc-muted: #EFEDE4;
--arc-brand: #C0E6C8;
--arc-accent: #E7D9BB;
--arc-line: #C3C1B8;
--arc-button: #E7D9BB;
--arc-button-text: #0A0F0C;
}The full scales
Eleven steps from lightest (50) to darkest (950) for each colour, spaced evenly to the eye. Designers pick from these; nothing else needs inventing.
#E8FDEC#DAF5DF#C0E6C8#9BD0A7#71B481#4B9660#2D7744#1B5F32#114925#0B3419#08200F#F9F7EE#EFEDE4#DDDBD2#C3C1B8#A4A299#85837B#68665E#525046#403D34#2E2B22#1D1B12#FFF5E9#FAEAD6#ECD7BB#D9BC95#BE9B6A#A17C45#825F29#684918#51380F#3A2709#241806#FEF6E6#F6ECD6#E7D9BB#D2BF95#B69F6B#998047#7B632A#624D19#4C3A10#36290A#221907#FFF4EF#FEE8DC#FCD0B8#EDB292#D58E66#B86D41#975023#7A3C13#602D0A#451F06#2B1305#EBFBF5#DDF3EB#C4E3D8#A1CCBD#79AF9D#56917E#397361#275B4B#1B463A#123229#0B1F19Method: perceptual colour space (OKLCH), each scale keeping its seed's hue. Contrast ratios computed with the WCAG 2.x formula. The brand green as text passes AA on every light ground shown. Next steps once a palette is chosen: apply it to the chosen website option, and check it against the real logo file (SVG) once the client sends it.