Coolours
Turn AI-designed colour palettes into Coolours links, with colour names, CSS and contrast checks
Should I use this
Quality & Safety
Based on automated analysis of tool definitions and protocol compliance.
Context Cost
This is the approximate number of tokens consumed each time the server's tools are loaded into a model's context. Higher counts reduce the attention available for other tasks.
Install
One-Click Install
Add this to your `claude_desktop_config.json` file:
{
"mcpServers": {
"coolours": {
"url": "https://coolours.perpetualsummer.ltd/mcp"
}
}
}Remote endpoints
https://coolours.perpetualsummer.ltd/mcpstreamable-httpWhat it can do
Tool inventory
Tools (3)
🟢create_palette_link(colours, name)
Turn a colour palette you have chosen into a link that opens it in Coolours (coolours.perpetualsummer.ltd), where the user can preview the swatches, tweak them and export them. Use this whenever you propose a colour scheme, so the user can see it rather than read hex codes. Also returns WCAG contrast ratios for every pair of colours: check them before recommending a text/background pairing (4.5 or more for body text, 3 or more for large text and UI components). Returns each colour's Coolours name: use those names when presenting the palette. Also returns the palette as CSS custom properties: whenever you show CSS, use it exactly as given rather than writing your own. Give the user the URL.
Input Schema
{
"type": "object",
"properties": {
"colours": {
"minItems": 1,
"maxItems": 20,
"type": "array",
"items": {
"type": "string"
},
"description": "Colours in display order. Hex (\"#1E293B\", \"#abc\"), rgb() or CSS colour names. No transparency."
},
"name": {
"description": "Palette name shown on the site, e.g. \"Fintech Dark\"",
"type": "string",
"maxLength": 100
}
},
"required": [
"colours"
],
"$schema": "http://json-schema.org/draft-07/schema#"
}Output Schema
{
"type": "object",
"properties": {
"url": {
"type": "string"
},
"colours": {
"type": "array",
"items": {
"type": "object",
"properties": {
"hex": {
"type": "string"
},
"name": {
"type": "string"
}
},
"required": [
"hex",
"name"
],
"additionalProperties": false
},
"description": "Each colour with the name Coolours shows on its swatch"
},
"css": {
"type": "string",
"description": "CSS custom properties exactly as Coolours exports them. Use as given; variable names match the Coolours UI"
},
"contrast": {
"type": "array",
"items": {
"type": "object",
"properties": {
"foreground": {
"type": "string"
},
"background": {
"type": "string"
},
"ratio": {
"type": "number"
},
"wcag": {
"type": "string",
"enum": [
"AAA",
"AA",
"AA large",
"fail"
]
}
},
"required": [
"foreground",
"background",
"ratio",
"wcag"
],
"additionalProperties": false
}
}
},
"required": [
"url",
"colours",
"css",
"contrast"
],
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false
}🟢parse_palette_link(url)
Read the colours and name back out of a Coolours link (coolours.perpetualsummer.ltd/create/...). Use this when the user pastes a Coolours URL, for example after editing a palette on the site, so you can apply their changes.
Input Schema
{
"type": "object",
"properties": {
"url": {
"type": "string",
"description": "The full Coolours URL"
}
},
"required": [
"url"
],
"$schema": "http://json-schema.org/draft-07/schema#"
}Output Schema
{
"type": "object",
"properties": {
"colours": {
"type": "array",
"items": {
"type": "object",
"properties": {
"hex": {
"type": "string"
},
"name": {
"type": "string"
}
},
"required": [
"hex",
"name"
],
"additionalProperties": false
},
"description": "Each colour with the name Coolours shows on its swatch"
},
"css": {
"type": "string",
"description": "CSS custom properties exactly as Coolours exports them. Use as given; variable names match the Coolours UI"
},
"name": {
"type": "string"
},
"ignored": {
"type": "array",
"items": {
"type": "string"
},
"description": "URL segments that are not valid swatches; the site ignores these too"
},
"contrast": {
"type": "array",
"items": {
"type": "object",
"properties": {
"foreground": {
"type": "string"
},
"background": {
"type": "string"
},
"ratio": {
"type": "number"
},
"wcag": {
"type": "string",
"enum": [
"AAA",
"AA",
"AA large",
"fail"
]
}
},
"required": [
"foreground",
"background",
"ratio",
"wcag"
],
"additionalProperties": false
}
}
},
"required": [
"colours",
"css",
"ignored",
"contrast"
],
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false
}🟢export_palette(colours, format)
Export a palette as CSS custom properties or a JavaScript object, with each colour named after its nearest named colour. Output matches Coolours' own Export feature. create_palette_link already returns the CSS; use this for the JS object, or for a palette you didn't create. Use the output as given: its names match the Coolours UI.
Input Schema
{
"type": "object",
"properties": {
"colours": {
"minItems": 1,
"maxItems": 20,
"type": "array",
"items": {
"type": "string"
},
"description": "Colours in display order. Hex (\"#1E293B\", \"#abc\"), rgb() or CSS colour names. No transparency."
},
"format": {
"type": "string",
"enum": [
"css",
"js"
]
}
},
"required": [
"colours",
"format"
],
"$schema": "http://json-schema.org/draft-07/schema#"
}Output Schema
{
"type": "object",
"properties": {
"code": {
"type": "string"
}
},
"required": [
"code"
],
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false
}Community
Evidence