Coolours
Turn AI-designed colour palettes into Coolours links, with colour names, CSS and contrast checks
¿Debería usar esto?
Calidad y seguridad
Basado en el análisis automatizado de las definiciones de herramientas y el cumplimiento del protocolo.
Costo de contexto
Este es el número aproximado de tokens que se consumen cada vez que las herramientas del servidor se cargan en el contexto de un modelo. Los recuentos más altos reducen la atención disponible para otras tareas.
Instalar
Instalación con un clic
Agrega esto a tu archivo `claude_desktop_config.json`:
{
"mcpServers": {
"coolours": {
"url": "https://coolours.perpetualsummer.ltd/mcp"
}
}
}Puntos de conexión remotos
https://coolours.perpetualsummer.ltd/mcpstreamable-httpQué puede hacer
Inventario de herramientas
Herramientas (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.
Esquema de entrada
{
"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#"
}Esquema de salida
{
"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.
Esquema de entrada
{
"type": "object",
"properties": {
"url": {
"type": "string",
"description": "The full Coolours URL"
}
},
"required": [
"url"
],
"$schema": "http://json-schema.org/draft-07/schema#"
}Esquema de salida
{
"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.
Esquema de entrada
{
"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#"
}Esquema de salida
{
"type": "object",
"properties": {
"code": {
"type": "string"
}
},
"required": [
"code"
],
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false
}Comunidad
Evidencia