Coolours
Turn AI-designed colour palettes into Coolours links, with colour names, CSS and contrast checks
Sollte ich dies verwenden
Qualität und Sicherheit
Basierend auf einer automatisierten Analyse der Tool-Definitionen und der Einhaltung des Protokolls.
Kontextkosten
Dies ist die ungefähre Anzahl der Tokens, die jedes Mal verbraucht werden, wenn die Tools des Servers in den Kontext eines Modells geladen werden. Höhere Werte verringern die Aufmerksamkeit, die für andere Aufgaben verfügbar ist.
Installieren
Installation mit einem Klick
Fügen Sie dies Ihrer Datei `claude_desktop_config.json` hinzu:
{
"mcpServers": {
"coolours": {
"url": "https://coolours.perpetualsummer.ltd/mcp"
}
}
}Remote-Endpunkte
https://coolours.perpetualsummer.ltd/mcpstreamable-httpWas es kann
Tool-Inventar
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.
Eingabe-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#"
}Ausgabe-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.
Eingabe-Schema
{
"type": "object",
"properties": {
"url": {
"type": "string",
"description": "The full Coolours URL"
}
},
"required": [
"url"
],
"$schema": "http://json-schema.org/draft-07/schema#"
}Ausgabe-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.
Eingabe-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#"
}Ausgabe-Schema
{
"type": "object",
"properties": {
"code": {
"type": "string"
}
},
"required": [
"code"
],
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false
}Community
Nachweis